如何利用 CSS clip-path 属性绘制外边框连接的等腰梯形?

利用 css 绘制外边框连接等腰梯形的技巧

要为 css 绘制等腰梯形添加外边框并将其与外层长方形的边框连接起来,可以使用以下技术:

css clip-path

利用 clip-path 属性创建两个梯形形状,其中较小的梯形居于较大的梯形之上。通过设置边框并裁剪较小梯形的形状,使其嵌入较大的梯形内,从而形成边框连接效果。

示例代码:

.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 clip-path 属性绘制外边框连接的等腰梯形?

通过这种方法,可以轻松地创建具有连接边框的等腰梯形形状,为 css 布局提供更多灵活性和设计可能性。

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

请登录后发表评论

    暂无评论内容