CSS中从图像裁剪三角形

我们的设计师希望做到这一点：

但我想不出一个好方法来进行三角形裁剪：

• 使用一个

  ：after

  ，它占据所有宽度并使用某种边界技巧来制作三角形
• 带有一个大的

  ：在
  元素之后，该元素是旋转的和白色的，但不应隐藏任何其他文本

• 用一些我不知道的魔法过滤器
• 通过使用画布，在JS中裁剪它，然后将图像作为base64 url加载？（可能是杀伤力过大：D）

---

你觉得怎么样？

我建议使用CSS clip属性：

.crop {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

clip属性的

rect

值表示将被裁剪的图像部分。这里有一个。

编辑：第2版：用于更改背景

给你：

HTML：（我使用了一个带有背景的

div

，但是你可以很容易地使用

img

元素。）

---

：使用边框技巧（或渐变）后应该可以。是的，这里你是身体的纯红背景色只是一个例子，当我们有图像背景或渐变背景时，这个解决方案不能比向用户显示丑陋的纯色（白色）部分更好。是的，

：after

元素必须与背景内容匹配，因此，如果背景发生变化，它将不起作用。从模型上看，Dorian有一个白色背景。国王，你有更好的解决办法吗？我相信Dorian会很感激的。看起来你从来没有听说过溢出剪辑技术。使用这项技术，你可以剪掉东西，甚至渲染一颗星星（在图像背景上显示OK）。你可以通过这个演示（我自己制作的）了解这项技术，它渲染了一个六边形，这太棒了。更新允许更改背景。还有，你为什么不把你的答案作为一个真实的答案，而不是一个评论？

<div class="container">
    <div class="img"></div>
</div>

.container {
    width: 250px;
    height: 100px;
    position: relative;
    overflow:hidden;
}
.img {
    width: 250px;
    height: 100px;
    background-color: blue;
    position: relative;
}
.img:after{
    content:"";
    position: absolute;
    width: 400px;
    height:125px;
    background-color: white;
    top:90px;
    left:-20px;
   transform: rotate(5deg);
   -moz-transform: rotate(5deg);
   -webkit-transform: rotate(5deg);

}