如何实现纯CSS标志形状的容器？ [英] How to implement an pure-CSS flag-shape container?

问题描述

我的目标是实现像这样的纯CSS标记形状的容器：

My target is to implement a pure-CSS flag-shape container like this:

要求包括：

• 背景色未知


• 适用于不同的 line-height 和 font-size 设置

• background-color of parent container is unknown
• works for different line-height and font-size settings

推荐答案

选项1

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

Option 1

Use clip-path, but check browser support for this property:

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>

使用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>

使用绝对位置的带渐变伪元素（模拟三角形）

Use absolutely positioned pseudoelements with gradients (to simulate triangles)

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>

这篇关于如何实现纯CSS标志形状的容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！