css - triangulo - flechas de navegacion en html

Flecha transparente/triángulo sangrado

Question

Me gustaría hacer una flecha transparente sobre una imagen . Este triángulo debe sangrarse en un bloque semitransparente y mostrar la imagen de fondo.

Salida deseada:

.barShow {
background-color: #000;
opacity: 0.5;
}
.barShow:before {
top: 0%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #999;
border-width: 20px;
margin-left: -20px;
}

<div class="barShow"></div>

La flecha CSS transparente debe ser transparente sin color.

Answer 1

Enfoque simple

• Use pseudo elemento con box-shadow y transform: rotate();

• Agregar overflow: hidden; a la div principal

Fragmento:

body {
margin: 0;
padding: 0;
background: url(http://i.imgur.com/EinPKO3.jpg);
background-size: cover;
}
div {
height: 100px;
width: 100%;
position: absolute;
bottom: 0;
overflow: hidden;
}
div:before {
position: absolute;
top: -50px;
left: calc(50% - 35px);
content: "";
height: 50px;
width: 50px;
background: transparent;
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: 0 0 0 5000px rgba(0, 0, 0, 0.6);
}

<div></div>

Answer 2

Aquí hay una solución que usa CSS clip-path que no desborda el wrapper.

.wrap {
position:relative;
width:480px;
height:270px;
background-image:url(http://placehold.it/480x270);
}
.wrap:after {
content:"";
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
height:50px;
background-color:rgba(0, 0, 0, 0.7);
-webkit-clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
-moz-clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
}

<div class="wrap"></div>

Answer 3

Hay varios enfoques para hacer una flecha transparente sobre una imagen con CSS . Los dos que describiré incluyen pseudo elementos para minimizar el marcado y tener el mismo resultado. También puede ver un enfoque SVG al final de esta respuesta:

El efecto transparente en la parte negra rgba() la flecha está hecho con colores rgba() que permiten la transparencia. Pero puede usar opacidad en los pseudo elementos si lo prefiere.

1. SkewX ()

Puede usar la skewX() CSS3 skewX() en dos pseudo elementos para hacer la flecha transparente. El principal activo de este enfoque es que la flecha transparente puede ser receptiva pero también le permite poner un borde en la forma negra y alrededor del círculo.

La capacidad de respuesta de la forma se realiza con la propiedad del padding-bottom para mantener su relación de aspecto (esta técnica se describe here ).

DEMO

.wrap {
position: relative;
overflow: hidden;
width: 70%;
margin: 0 auto;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.arrow {
position: absolute;
bottom: 0;
width: 100%;
padding-bottom: 3%;
background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before,
.arrow:after {
content: '''';
position: absolute;
bottom: 100%;
width: 50%;
padding-bottom: inherit;
background-color: inherit;
}
.arrow:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.arrow:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}

<div class="wrap">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
<div class="arrow"></div>
</div>

Soporte del navegador para la propiedad transform : skew() es IE9 + ( ver canIuse ).

2. Frontera

El activo de esta técnica es el soporte del navegador, por lo que si necesita soporte para IE8, este es para usted. El inconveniente es que la forma no puede responder porque el borde no puede usar% widths.

DEMO

.wrap {
position: relative;
overflow: hidden;
width: 70%;
margin: 0 auto;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.arrow {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before,
.arrow:after {
content: '''';
position: absolute;
bottom: 100%;
width: 50%;
box-sizing: border-box;
}
.arrow:before {
right: 50%;
border-bottom: 20px solid rgba(0, 0, 0, 0.8);
border-right: 20px solid transparent;
}
.arrow:after {
left: 50%;
border-bottom: 20px solid rgba(0, 0, 0, 0.8);
border-left: 20px solid transparent;
}

<div class="wrap">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
<div class="arrow"></div>
</div>

3. ¡Juega con eso!

Ejemplo: si puede cambiar el color negro transparente al mismo que el color de fondo (blanco aquí), puede hacer un triángulo / flecha transparente con la misma imagen de fondo que el bloque:

DEMO

.wrap {
position: relative;
overflow: hidden;
width: 50%;
margin: 0 auto;
background-color:#fff;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'''';
position: absolute;
bottom: 0;
width: 50%;
background-color: inherit;
padding-bottom:3%;
}
.wrap:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.wrap:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}

<div class="wrap">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
</div>

4. Información sobre herramientas con un triángulo sobre una imagen.

Si necesita usar esta forma sobre otra imagen , degradado de fondo o cualquier otro color no plano, necesitará usar un enfoque diferente para ver la imagen alrededor de la forma de esta manera:

El punto es usar la misma imagen dos veces. Una vez en el elemento div y una vez en el triángulo, colócalas exactamente en el mismo lugar con un posicionamiento absoluto. La flecha está hecha con transform:rotate(); .

DEMO

body{
padding-top:100px;
background:url(''https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg'')no-repeat center center;
background-size:cover;
}
.wrap, .img {
display:inline-block;
position:relative;
}
.tr{
position:absolute;
overflow:hidden;
top:-25px; left:100px;
width:50px; height:50px;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
.tr img{
position:absolute;
top:-15px; left:-100px;
-webkit-transform-origin: 125px 40px;
-ms-transform-origin: 125px 40px;
transform-origin: 125px 40px;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.img{
overflow:hidden;
width: 600px; height:100px;
}
.img img{
position:absolute;
top:-40px;
}

<div class="wrap">
<div class="img">
<img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" />
</div>
<div class="tr">
<img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" />
</div>
</div>

DEMO con sombras de caja.

5. SVG y cliPath

DEMO usando una etiqueta svg y clipPath.
Este podría ser un enfoque semánticamente mejor si está haciendo gráficos.