如何实现纯CSS旗形容器？

Question

我的目标是像这样实现一个纯CSS旗形容器：

要求包括：

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

Answer 1

选项 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>

Answer 2

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

使用 ::before 和 ::after 个伪元素创建 2 层。
添加 background-color 并将它们放置在具有 50% 父级高度的 position: absolute 中。
应用 CSS3 skew() 变换以获得旗帜形状。

输出图像：

工作演示：

* {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;
}

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

如何实现纯CSS旗形容器？

How to implement an pure-CSS flag-shape container?

css

css-shapes

选项 1

选项 2

选项 3