Как создать css-формы X, которые должны быть внутри?

Question

Мне нужно создать форму X, используя css3, где в нее должны быть помещены фоновые изображения и текст. Ширина и высота X-формы будут составлять 300 пикселей. Пожалуйста, предложите. Благодарю.

Answer 1

Вы можете сделать это, используя svg's mask.

Вы можете изменить width и height путем изменения #container «s 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 свойства. В настоящее время это только supported on -webkit- browsers и не должно использоваться.

Answer 2

Я использовал clippy для создания маски изображения.

Обратите внимание, я не уверен, что это лучший вариант из-за browser support, но это работает для хрома в настоящее время с использованием префикса -webkit- для меня.

Однако, поскольку IE не поддерживает это, я оставлю это здесь как дополнительное, хром-единственное решение.

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="" />