Question

尝试了下面的代码，但我的图像没有变成三角形。帮助我解决我的问题的一些解决方案

.triangle {
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid transparent;
}

Answer 1

如果您玩边框，并且背景颜色为纯色，则可以使用以下内容：

div {
  height: 300px;
  width: 300px;
  position: relative;
  background: url(http://placekitten.com/g/300/300);
}
div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  border-bottom: 300px solid transparent;
  border-left: 150px solid white;
  border-right: 150px solid white;
}

<div></div>

使用伪元素“剪切”三角形

Answer 2

CSS：

.triangle {      
  width: 0; height: 0;
  border-bottom: 116px solid blue;
  border-left: 116px solid transparent;
  border-right: 116px solid transparent;
}

小提琴网址：http://jsfiddle.net/Khumesh/kpm1feLo/

试试这个：http://jsfiddle.net/Khumesh/zbh3ewLd/

Answer 3

如果您尝试将图片剪裁为矩形，请使用clip-path。

这是一个很好的帮手：http://bennettfeely.com/clippy/

如何将三角形应用于图像？

3 个答案: