Question

我希望你过得愉快。我的问题是我需要在三角形div内部放置一个图像（为了获得图像的三角形轮廓）。虽然创建了这个三角形div，好像它只是div的边框，而div本身的高度和宽度都是0。

#triangle{
    height: 0;
    width: 0;
    border-width: 400px 0px 0px 500px;
    border-style: solid;
    border-color: transparent transparent transparent red;
    float: left;
    border-style: inset;}

每当我尝试将图像放在三角形内部时，它就会出现在旁边。

https://jsfiddle.net/5uv7m9tv/

有关如何解决此问题的任何提示？感谢。

Answer 1

不要创建<div>来赋予三角形形状，而是使用CSS剪辑路径来塑造<img>元素：

img.triangle {
  /* the polygon() function takes a comma-separated list
     of x y positions in relation to the origin 0 0 point
     (the top-left) of the element, using those points
     to form a line from one to the next (and from the last
     to the first): */
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

<img class="triangle" src="http://lorempixel.com/150/150/people/2" />

参考文献：

clip-path (MDN)。
clip-path (W3C)。

把图像放在三角形里面

1 个答案: