首页 前端知识 CSS 实现弧边选项卡

CSS 实现弧边选项卡

2024-05-10 08:05:49 前端知识 前端哥 197 34 我要收藏

这样的弧度的弧线选项卡你知道用 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 的掌握程度,以及对视觉效果的理解能力。

希望这篇文章能够帮助你学习和巩固这些知识点。

如果你有什么问题或建议,请在评论区留言,如果你觉得这篇文章有用,请分享给你的朋友!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7919.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!