CSS 实现弧边选项卡

最新推荐文章于 2024-02-27 11:40:35 发布

子辰Web草庐

最新推荐文章于 2024-02-27 11:40:35 发布

阅读量888

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/duyizichen/article/details/131254313

版权

这样的弧度的弧线选项卡你知道用 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);
}