如何利用 clip-path 实现等腰梯形边框?

如何利用 clip-path 实现等腰梯形边框?

利用 clip-path 绘制等腰梯形边框

css 中绘制等腰梯形边框,可以使用 clip-path 属性。原理是通过绘制两个轮廓相似的梯形,其中上面的梯形比下面的稍小,并将其通过 z-index 或背景叠加在一起。

代码示例

.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)); }
登录后复制

效果演示

[jsbin 示例](https://jsbin.com/mogirok/edit?css,output)

这种方法可以实现等腰梯形边框,并可以将其与外侧的长方形边框连接在一起。

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容