利用 css 绘制外边框连接等腰梯形的技巧
要为 css 绘制等腰梯形添加外边框并将其与外层长方形的边框连接起来，可以使用以下技术：
利用 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 布局提供更多灵活性和设计可能性。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容