如何用 css 绘制带外边框的等腰梯形
本文介绍了一种使用 css clip-path 属性绘制带有外边框等腰梯形的简单方法。这种方法的原理是绘制两个略有不同的梯形，一个较小，叠加在另一个上面。
以下是实现此效果的 css 代码：
.test2 { width: 115px; height: 230px; position: relative; top: -4px; background: #4FA6E5; border-bottom: 1px solid #4FA6E5; clip-path:polygon(0 55px, 100% 0,100% 100%,0 calc(100% - 55px)); box-sizing: border-box;}.test2:after{ content:''; padding: 0; display:block; width: 100%; height: 100%; box-sizing: border-box; background: #082F4C; clip-path:polygon(2px 57px, 100% 2px,100% calc(100% - 2px),2px calc(100% - 57px)); }
这个代码的作用是：
立即学习“前端免费学习笔记（深入）”；
创建一个外层元素 .test2，它将作为梯形的基础。为 .test2 创建一个内层元素 :after，它将是嵌套的梯形。使用 clip-path 属性为两个元素定义梯形形状。通过设置背景色和 border-bottom 属性，为外层元素添加外边框。
以下是这个效果的示例演示：
[图片：带外边框的等腰梯形]
效果演示：
[附上演示链接]
以上就是如何用 CSS 绘制带有外边框的等腰梯形？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1631108.html
微信扫一扫 
支付宝扫一扫 
