如何实现纯CSS标志形容器？

Question

我的目标是实现一个纯CSS标志形容器，如下所示：

要求包括：

父容器的
• background-color未知
• 适用于不同的line-height和font-size设置

Answer 1

另一种可能的变体是使用转换的伪元素。

• 使用::before ad ::after伪元素创建2个图层。
• 添加background-color并将position: absolute置于父级50%的高度。
• 应用CSS3 skew()转换以获取标志形状。

输出图片：

工作演示：

＆＃13;

＆＃13;

* {box-sizing: border-box;}
body {
  background: linear-gradient(green, yellow) no-repeat;
  min-height: 100vh;
  padding: 10px;
  margin: 0;
}
.flag {
  padding: 5px 40px 5px 10px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  line-height: 40px;
  overflow: hidden;
}

.flag:before,
.flag:after {
  transform-origin: top right;
  transform: skewX(-45deg);
  position: absolute;
  background: pink;
  content: '';
  left: -45px;
  height: 50%;
  z-index: -1;
  right: 0;
  top: 0;
}

.flag:after {
  transform-origin: bottom right;
  transform: skewX(45deg);
  top: auto;
  bottom: 0;
}

＆＃13;

<div class="flag">5 Items</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

选项1

使用clip-path，但请检查此属性的浏览器支持：

div {
  clip-path: polygon(0% 0%, 100% 0%, 85% 50%, 100% 100%, 0% 100%);
  
  background-color: #ff69b4;

  /* styles for demo */
  padding: 20px;
  color: #fff;
}

<div>5 items</div>

选项2

使用SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <polygon points="0 0, 100 0, 85 50, 100 100, 0 100" fill="#ff69b4" />
</svg>

选项3

使用具有渐变的绝对定位的伪元素（以模拟三角形）

div {
  background-color: #ff69b4;
  margin-right: 50px;
  position: relative;

  /* styles for demo */
  padding: 20px;
  color: #fff;
}

/* pseudoelement to simulate triangles */
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 50px;
  height: 50%;
  background-image: linear-gradient(to left top, transparent 50%, #ff69b4 50%);
}

/* Flip triangle */
div:after {
  top: 50%;
  transform: scaleY(-1);
}

<div>5 items</div>