如何创建必须是背景的 css 形状 X？

Question

我需要使用 css3 创建一个 X 形状，背景图像和文本应该放在其中。 X 形状的宽度和高度各为 300px。请建议。谢谢

Answer 1

您可以使用 svg 的 mask 来做到这一点。

您可以通过更改 #container 的 width 和 height 来更改 width 和 height。

#container {
  width: 80px;
  height: 100px;
}

<div id="container">
  <svg width="100%" height="100%" viewBox="0 0 80 100" preserveAspectRatio="none">
    <defs>
      <mask id="m" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="100">
        <path d="M0,0 h15 l25,38 l25,-38 h15 l-32,50 l32,50 h-15 l-25,-38 l-25,38 h-15 l32,-50" fill="white" />
      </mask>
    </defs>
    <image mask="url(#m)" width="80" height="100" xlink:href="http://www.lorempixel.com/80/100" />
  </svg>
</div>

此外，可以使用 pattern。

#container {
  width: 80px;
  height: 100px;
}

<div id="container">
  <svg width="100%" height="100%" viewBox="0 0 80 100" preserveAspectRatio="none">
    <defs>
      <pattern id="p" patternUnits="userSpaceOnUse" x="0" y="0" width="80" height="100">
        <image mask="url(#m)" width="80" height="100" xlink:href="http://www.lorempixel.com/80/100" />
      </pattern>
    </defs>
    <path d="M0,0 h15 l25,38 l25,-38 h15 l-32,50 l32,50 h-15 l-25,-38 l-25,38 h-15 l32,-50" fill="url(#p)" />
  </svg>
</div>

当浏览器实现 shape-inside property. Currently it is only supported on -webkit- browsers 并且不得使用时，可以将文本包裹在形状内。

Answer 2

我已经使用 clippy 创建了一个图像遮罩。

请注意，由于 browser support，我不确定这是最好的选择，但这对 chrome 目前正在使用 -webkit- 前缀给我。

但是，由于 IE 不支持它，我将把它留在这里作为 一个额外的，chrome-only 解决方案。

img {
  width: 300px;
  height: 300px;
  -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

<img src="http://placekitten.com/g/300/300" alt="" />

如何创建必须是背景的 css 形状 X？

how to create css shapes X which has to be background inside?

html

css

css-shapes