图片上有个三角应该怎么实现呢

Question

项目中需要这种效果，图片上面有个三角，并且三角是镂空的。
我能想到的做法是在三角用一张png，三角两边两个白色div。
但是这样太麻烦了，不知有没有简单点是方法可以实现。
加一张大图

Answer 1

大概这样吧，随便找了个图

<div</div>

div {
  position: relative;
  width: 300px;
  height: 150px;
  background: url(https://sfault-image.b0.upaiyun.com/138/754/1387544687-59b78502d71e9);
}

div::after {
  content: "";
  position: absolute;
  width: 310px;
  height: 150px;
  clip-path: polygon(300px 50px, 310px 60px, 300px 70px);
  background: inherit;
}

http://jsbin.com/komeledomu/e...

Answer 2

我猜你的思路错？换个思路
在我看来，不是图片上的三角形，而是导航的当前样式。
假设是导航列表是Li

li:after{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    border:30px solid #fff;
    border-bottom: 30px solid transparent;

}

Answer 3

这个应该是border-bottom，就是用border绘制三角形，再定位就行了

Answer 4

设置div的宽，高都为0，border宽度大点，一个方向有颜色，其他透明，再用定位给定到目标位置，如果是要镂空的话再在上面加一个白色的三角

.box{height:80px; 
     line-height:80px; 
     margin-bottom:30px; 
     padding-left:2em; 
     background:#F3961C; 
     position:relative; 
 } 
.sanjiao{width:0; 
         height:0; 
         font-size:0; 
         border-width:15px; 
         border-style:solid; 
         border-color:#f3961c transparent transparent; 
         _border-color:#f3961c white white; 
         overflow:hidden; 
         position:absolute; 
         left:60px; 
         bottom:-30px; 
  }

Answer 5

1. 做两个梯形白色的dom遮罩图片，留出一个三角形的空隙。
2. 使用CSS3的新特性：clip-path

Answer 6

白色带镂空三角做成一张大于banner长度的背景图，点击的时候移动背景图位置

Answer 7

div{

  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;

}

Answer 8

html:

<div id="main">
        <div class="triangle"></div>
</div>

css:

#main{
    width:500px;
    height:400px;
    border:2px solid red;
    margin-top:100px;
    position:relative;
}
.triangle{
      position:absolute;
      top:-40px;
      left:220px;
    width:0;
    height:0;
    border-width:20px;
    border-style:solid dashed dashed dashed;
    border-color:transparent   transparent #e66161 transparent;
}

演示地址：http://runjs.cn/detail/hsqnmn1g

原理以及更多介绍参考：三种纯CSS实现三角形的方法