html5 - triangulo - flechas de navegacion en html

Crear una flecha transparente sobre la imagen en CSS3

Question

Intento crear un efecto donde tengo una flecha transparente sobre cualquier imagen en CSS3. Vea la siguiente imagen.

¿Alguna idea de cómo hacer esto? Usar LESS si eso ayuda.

Answer 1

Dibujar un triángulo transparente / invertido en CSS3

puede usar la técnica de triángulos CSS3 y hacer la forma invertida combinando los pseudoobjetos :before y :after , cada uno para dibujar una parte del triángulo.

Podrías hacer algo como esto:

.image {
position:relative;
height:200px;
width:340px;
background:orange;
}
.image:before, .image:after {
content:'''';
position:absolute;
width:0;
border-left:20px solid white;
left:0;
}
.image:before {
top:0;
height:20px;
border-bottom:16px solid transparent;
}
.image:after {
top:36px;
bottom:0;
border-top:16px solid transparent;
}

aquí hay un jsfiddle ilustrativo

Acabo de utilizar un fondo naranja plano para el ejemplo ... pero puedes cambiarlo a imagen, y con suerte obtendrás lo que querías =)

Editar: y un resultado más final podría ser algo como esto

Answer 2

Creo que necesitas algo como esto:

.arrow {
bottom: -25px;
left: 30px;
width: 40px;
height: 40px;
position: absolute;
overflow: hidden;
}
.arrow:after {
content: '' '';
display: block;
background: red;
width: 20px;
height: 20px;
transform: rotate(45deg);
position: absolute;
top: -19px;
left: 3px;
background: #999;
border: 5px solid rgba(0, 0, 0, 0.2);
background-clip: padding-box;
}