如何创建一个 CSS 形状，其中每一面都单独变换。
类似于下图中的形状。
只使用 CSS 而不使用图像可以吗？
我认为 CSS 中没有任何方法可以单独选择和变换每一面，但您可以通过使用透视变换（纯 CSS）来实现有问题的形状。
沿 X 轴和 Y 轴以透视方式旋转元素会产生每侧都有单独变换的效果。您可以调整角度和透视设置以完全根据需要创建形状。
.shape {
background: black;
margin: 100px;
height: 200px;
width: 200px;
transform: perspective(20px) rotateX(-2deg) rotateY(-1deg); /* make perspective roughly 10% of height and width */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape"></div>
或者，您可以利用clip-path特征。可以单独使用 CSS 或使用内联 SVG 创建剪辑路径。 SVG 剪辑路径比 CSS 版本具有更好的浏览器支持。
div {
height: 200px;
width: 200px;
background: black;
}
.css-clip {
-webkit-clip-path: polygon(0% 10%, 100% 0%, 85% 100%, 15% 95%);
clip-path: polygon(0% 10%, 100% 0%, 85% 100%, 15% 95%);
}
.svg-clip {
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
/* Just for demo */
div{
display: inline-block;
margin: 10px;
line-height: 200px;
text-align: center;
color: beige;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<!-- CSS Clip path -->
<div class='css-clip'>CSS Clip Path</div>
<!-- SVG Clip path -->
<svg width='0' height='0'>
<defs>
<clipPath id='clipper' clipPathUnits='objectBoundingBox'>
<path d='M0 0.1, 1 0, 0.85 1, 0.15 0.95' />
</clipPath>
</defs>
</svg>
<div class='svg-clip'>SVG Clip path</div>
Note:虽然可以使用 CSS 实现此形状，但对于如此复杂的形状最好不要使用 CSS。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
