形状符号内的内容/数字

Question

我想将内容放入星形符号内。发现只使用 css 而不使用 svg 很困难。我尝试了这样的方法： https: //css-tricks.com/examples/ShapesOfCSS/但它不起作用。一种方法是使用 SVG，但它们的响应能力很差，因为我需要在那里有额外的 jquery/js 函数。所以想知道是否还有其他方法可以实现这一目标。

Answer 1

您可以使用剪辑路径（Clippy是一个很好的生成器）来创建星形，并使用伪元素垂直对齐文本。

注意：DOM 元素上的剪辑路径目前仅受 Chrome、Firefox 及其移动版本支持。

.star {
  height: 100px;
  width: 100px;
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  text-align: center;
  background: red;
  color: white;
}

.star::before {
  display: inline-block;
  height: 100%;
  background: blue;
  vertical-align: middle;
  content: '';
}

<div class="star">100</div>