我需要实现这一点：
请注意,容器旋转,但图片不是..
现在我做了：
div.img {
position: relative;
overflow: hidden;
width: 320px;
}
div.img img {
display: block;
width: 100%
}
div.img span {
position: absolute;
content: "";
width: 75%;
height: 75%;
transform: rotate(133deg);
background: white
}
div.img span.tl {
top: -36%;
left: -36%
}
div.img span.bl {
bottom: -36%;
left: -36%
}
div.img span.br {
bottom: -36%;
right: -36%
}
div.img span.tr {
top: -36%;
right: -36%
}
<div class="img"> <img src="http://lorempixel.com/320/320/nature/?v2s" alt="Pellete"> <span class="tl"></span> <span class="bl"></span> <span class="tr"></span> <span class="br"></span> </div>
我以为可能会创建一个形状,并将其用作具有CSS的掩码,并将其添加到具有较高z-index的容器中,
你能想到一个更好的方法吗？
PD：作为最后的手段,我将要求设计者创建一个.svg(因为与图像的响应不能正确呈现).
解决方法
如果你计划svg为什么不直接使用它.您不需要要求您的设计师做任何事情,您可以直接编码,控制圆角,形状…及其可扩展性：
svg{display:block;width:30%;height:auto;}
<svg viewBox="1 1 8 8"> <pattern id="image" width="10" height="10" patternUnits="userSpaceOnUse"> <image xlink:href="http://i.imgur.com/kreZqnx.jpg" x="0" y="0" height="10" width="10" /> </pattern> <path d="M5.5 1.5 L8.5 4.5 Q9 5 8.5 5.5 L5.5 8.5 Q5 9 4.5 8.5 L 1.5 5.5 Q1 5 1.5 4.5 L4.5 1.5 Q 5 1 5.5 1.5z" fill="url(#image)" /> </svg>
其他要点是：
>您可以保持用户交互形状的界限(点击或悬停)
>在任何背景上显示(纯色渐变,背景图像…)
示例：
#shape:hover{
cursor:pointer;
fill:gold;
}
body{
background:url('http://i.imgur.com/5NK0H1e.jpg');
background-size:cover;
}
svg{display:block;width:50%;height:auto;}
<svg viewBox="1 1 8 8"> <pattern id="image" width="10" height="10" patternUnits="userSpaceOnUse"> <image xlink:href="http://i.imgur.com/kreZqnx.jpg" x="0" y="0" height="10" width="10" /> </pattern> <path id="shape" d="M5.5 1.5 L8.5 4.5 Q9 5 8.5 5.5 L5.5 8.5 Q5 9 4.5 8.5 L 1.5 5.5 Q1 5 1.5 4.5 L4.5 1.5 Q 5 1 5.5 1.5z" fill="url(#image)" /> </svg>
