如何用 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));
}这个代码的作用是：
立即学习“前端免费学习笔记（深入）”；
以下是这个效果的示例演示：
[图片：带外边框的等腰梯形]
效果演示：
[附上演示链接]
以上就是如何用 CSS 绘制带有外边框的等腰梯形？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
776
收藏
