这样的弧度的弧线选项卡你知道用 CSS 怎么做吗？
是不是又要去找 UI 小姐姐了？
我是渡一前端子辰老师，今天让我们一起探索这个有趣的技巧吧。
实现步骤
要实现这样的弧度弧线选项卡，我们可以分为四个步骤：
- 第一步，创建一个矩形
- 第二步，给矩形的左上角和右上角设置圆角
- 第三步，在矩形的左右两边加上小方块，并且让方块靠下
- 第四步，把小方块变成弧形的角，并且旋转整个元素
第一步：创建一个矩形
要创建一个矩形，我们可以利用 CSS 中的 width 和 height 属性来设置元素的宽度和高度，然后用 background 属性来设置元素的背景色。
例如，要创建一个150px宽40px高的红色矩形，我们可以这样写：
.tab {
width: 150px;
height: 40px;
background: #ed6a5e;
}
第二步：给矩形的左上角和右上角设置圆角
要给矩形的左上角和右上角设置圆角，我们可以利用 CSS 中的 border-radius 属性来设置元素边框的圆角半径。
例如，要给矩形的左上角和右上角设置 10px 的圆角，我们可以这样写：
.tab {
width: 150px;
height: 40px;
background: #ed6a5e;
border-radius: 10px 10px 0 0;
}
第三步：在矩形的左右两边加上小方块，并且让方块靠下
要在矩形的左右两边加上小方块，并且让方块靠下，我们可以利用 CSS 中的伪元素 ::before 和 ::after 来创建两个附加在元素前后的内容，并且用 position 属性来设置元素的定位方式。
例如，要在矩形的左右两边各加一个 10px 宽 10px 高并且跟矩形同色的小方块，并且让方块靠下对齐，我们可以这样写：
.tab {
width: 150px;
height: 40px;
background: #ed6a5e;
border-radius: 10px 10px 0 0;
position: relative; /* 设置相对定位 */
}
.tab::before,
.tab::after {
content: ""; /* 设置空内容 */
position: absolute; /* 设置绝对定位 */
width: 10px; /* 设置宽度 */
height: 10px; /* 设置高度 */
bottom: 0; /* 设置底部对齐 */
background: #ed6a5e; /* 设置背景色 */
}
.tab::before {
left: -10px; /* 设置左边位置 */
}
.tab::after {
right: -10px; /* 设置右边位置 */
}
第四步：把小方块变成弧形的角，并且旋转整个元素
要把小方块变成弧形的角，我们可以利用CSS中的径向渐变radial-gradient属性来设置元素背景色从中心向外渐变。
例如，要把左边小方块变成弧形，我们可以这样写。
右边的小方块以同样的方式设置。
.tab::before,
.tab::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
bottom: 0;
}
.tab::before {
left: -10px;
/* 设置径向渐变 */
background: radial-gradient(circle at 0 0,
transparent 10px,
#ed6a5e 10px);
}
.tab::after {
right: -10px;
/* 设置径向渐变 */
background: radial-gradient(circle at 10px 0,
transparent 10px,
#ed6a5e 10px);
}
现在跟我们想要的还是有不小的差距的，弧度有很大的差别。
之前的很多同学都会做，但是到这一步就会卡住很多人了。
我们发挥想象力换个角度看，把整个元素旋转一下。
我们以元素底部的中心位置为变形原点来旋转。
.tab {
width: 150px;
height: 40px;
margin: 50px auto;
background: #ed6a5e;
border-radius: 10px 10px 0 0;
position: relative;
/* 设置变形原点 */
transform-origin: center bottom;
/* 景深 40px 旋转 30deg */
transform: perspective(40px) rotateX(30deg);
}
现在我们就搞定了。
那里边的文字怎么办呢？能写在里边吗？
答案是不能的，因为那样的话文字会跟着元素一起旋转不好调整。
文字可以单独提出去，用绝对定位跟元素进行重合。
总结
这篇文章介绍了如何用CSS实现弧度弧线选项卡的方法。我们分析了目标效果，然后按照四个步骤来实现：
- 第一步，创建一个矩形
- 第二步，给矩形的左上角和右上角设置圆角
- 第三步，在矩形的左右两边加上小方块，并且让方块靠下
- 第四步，把小方块变成弧形的角，并且旋转整个元素
在第四步中，我们使用了CSS中的径向渐变和变换属性来设置元素背景色和旋转角度。
我们还使用了伪元素和绝对定位来创建和调整小方块。
这个技巧考察了我们对 CSS 的掌握程度，以及对视觉效果的理解能力。
希望这篇文章能够帮助你学习和巩固这些知识点。
如果你有什么问题或建议，请在评论区留言，如果你觉得这篇文章有用，请分享给你的朋友！
