css - 将图像放在三 Angular 形内

Question

希望您今天过得愉快。我的问题是我需要将图像放在三 Angular 形 div 中(以获得图像的三 Angular 形轮廓)。虽然创建了这个三 Angular 形 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;}

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

https://jsfiddle.net/5uv7m9tv/

关于如何解决这个问题的任何提示？谢谢。

Answer 1

不要创建 <div>给出三 Angular 形形状，而不是使用 CSS clip-path 来塑造 <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) .