css折角矩形带边框

时间：2026-01-31 15:58:13

折角矩形是一种很常见的 UI 设计元素，它通常用于制作按钮、卡片等 UI 元素。在 CSS 中制作折角矩形通常需要一些技巧，接下来我们就来介绍如何使用 CSS 制作一款折角矩形带边框。
首先，我们需要使用 CSS 的边框样式来制作边框效果。这里我们使用border属性来实现，同时还需要设置border-radius属性来设置圆角效果。接着，我们需要使用伪元素::before和::after来制作折角效果，这里我们设置了一个弹性盒子来实现自适应大小。
下面是完整的代码：

p {display: inline-block;position: relative;padding: 10px 20px;background-color: #f5f5f5;border: 1px solid #ddd;border-radius: 5px;font-size: 16px;font-weight: bold;color: #333;}p::before,p::after {content: "";position: absolute;top: 4px;bottom: 4px;left: 4px;right: 50%;background-color: #f5f5f5;border: 1px solid #ddd;border-right: none;border-radius: 5px 0 0 5px;display: flex;justify-content: center;align-items: center;}p::after {left: 50%;right: 4px;border-right: 1px solid #ddd;border-left: none;border-radius: 0 5px 5px 0;}

以上代码可以让我们制作一个样式为灰色的折角矩形，同时也可以根据需要进行样式的修改。想要学习更多的 CSS 技巧，可以参考一些相关的博客、教程等资源。
上一篇：css抽奖的过渡动画
下一篇：css拼接不规则图形