tengo la siguiente duda de como hacer un div punteagudo NOTA: me refiero a solo uno no con dos div por que asi lo se hacer aqui les dejo una imagen de lo que quiero y un poco de codigo
esto es lo que quiero lograr
esto es lo que tengo
#triangle{
width: 250px;
height:250px;
background-image:url(avatar.png);
background:black;
}
.triangulo {
position:absolute;
width: 0;
height: 0;
border-right: 60px solid transparent;
border-left: 60px solid transparent;
border-bottom: 60px solid transparent;
border-top: 60px solid black;
margin-top:250px;
margin-left:65px;
}
<div id="triangle">
<div class="triangulo"></div>
</div>
como veran lo que me gustaria es hacerlo con un solo div y asi poner una imgen de fondo el el div para que quede como en la foto , alguna idea o tips para lograr esto?