如何使用HTML和CSS在其中绘制带有文本的选项卡

Question

我想让我的标签看起来如下图所示:

但我无法画出这个.我去过W3Schools并在线查看了几个教程但是无法绘制这个.我甚至玩过伪元素::before,::after但仍然没有运气.每个选择都会产生一个页面.

Answer 1

您正在寻找的设计类似于我的答案中描述的设计.我发布了一个单独的答案,因为存在渐变背景,重叠的三角形区域(在下一个项目上)和盒子阴影等,你需要的东西比那个复杂得多.

所使用的方法类似于答案,即在每个元素中添加两个伪li元素并且它们在相反方向上倾斜以实现该效果.以下是为您的设计所做的一些额外步骤:

• 伪元素(:after)被添加到ul渐变中,并且从半透明白色变为透明然后变为半透明黑色被设置为其背景图像.此伪元素的大小小于父ul容器,这会产生渐变效果.
• 逐步递减z-index分配给每个li元素以使前面的元素前进并使其三角形位在下一个元素之上.
• box-shadow并border-right添加到li:before和li:after元素以获取箭头及其阴影.
• 一个坚实的白色边框和两个box-shadow加在周围ul.

您可以在代码段的"完整页面视图"中看到输出的响应.

ul {
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 60px;
  color: white;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  border: 2px solid white;
  border-radius: 30px;
  list-style-type: none;
  box-shadow: 2px 2px 0px #DDD, -2px 2px 0px #DDD;
  white-space: nowrap;
  overflow: hidden;
}
li {
  position: relative;
  display: inline-block;
  width: 33.33%;
  text-indent: -20px;
}
li:before,
li:after {
  position: absolute;
  left: 0;
  content: '';
  height: 50%;
  width: 100%;
  background: rgb(31, 139, 188);
  border-right: 3px solid rgb(87, 153, 190);
  box-shadow: 3px -2px 2px rgba(0, 0, 0, 0.15);
}
li:first-child:before,
li:first-child:after {
  background: rgb(255, 0, 0);
}
li:before {
  top: 0px;
  transform: skewX(45deg);
  transform-origin: left bottom;
  z-index: -1;
}
li:after {
  bottom: 0px;
  transform: skewX(-45deg);
  transform-origin: left top;
  z-index: -2;
}
li:first-child {
  text-indent: 0px;
  z-index: 2;
}
li:nth-of-type(2) {
  z-index: 1;
}
li:last-child {
  width: calc(33.33% + 15px);
}
ul:after {
  position: absolute;
  content: '';
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.05));
  border-radius: 25px;
  z-index: 3;
  pointer-events: none;
}

/* if you need hover effects */

li:hover:before,
li:hover:after {
  background: yellowgreen;
}

<ul>
  <li>Text</li
  ><li>Text</li 
  ><li>Text</li>
  <!-- > is added in next line intentionally to avoid space between inline block elements -->
</ul>