如何用 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)); }
这个代码的作用是:
以下是这个效果的示例演示:
[图片:带外边框的等腰梯形]
效果演示:
[附上演示链接]