Transparenter Pfeil auf der rechten Seite des Bildes

Question

Ich versuche einen transparenten Pfeil auf der rechten Seite eines Bildes vertikal in der Mitte zu platzieren und das Hintergrundbild zu zeigen.

Ich habe gelesen this answer, und this codepen ist im Grunde genau das, was ich will, aber ich kann nicht meinen Kopf herum, warum es funktioniert und was ich ändern müsste, um es auf der rechten Seite zu platzieren.

Codepen Code:

.wrap { 
    position: relative; 
    overflow: hidden; 
    width: 70%; 
    height:150px; 
    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); 
} 

Answer 1

Es gibt zwei Polygone mit weißem Hintergrund auf das Bild, ist es nicht ein Pfeil, aber der Raum zwischen den beiden Polygonen. Ändern Sie die Breite und die Position von :before und :after Sie können das Dreieck verschieben.

.wrap { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 70%; 
 
    height:150px; 
 
    margin: 0 auto; 
 
    background-color:#fff; 
 
} 
 
.wrap img { 
 
    width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 
.wrap:before, .wrap:after { 
 
    content:''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    background-color: inherit; 
 
    padding-bottom:3%; 
 
} 
 
.wrap:before { 
 

 
    -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: 97%; 
 
    -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>

In Firefox in einigen Auflösungen erscheint ein Pixel des Bildes in der Unterseite können bottom:-1px in .wrap::before, .wrap::after

Answer 2

Haupt CSS-Eigenschaften Breite beheben, die Sie ändern müssen sind transform-origin und transform mit einigen anderen Änderungen wie folgt:

.wrap { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 70%; 
 
    height:150px; 
 
    margin: 0 auto; 
 
    background-color:#fff; 
 
} 
 

 
.wrap img { 
 
    width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 

 
.wrap:before, .wrap:after { 
 
    content:''; 
 
    position: absolute; 
 
    right: 0; 
 
    height: 50%; 
 
    background-color: inherit; 
 
    padding-right:3%; 
 
} 
 

 
.wrap:before { 
 
    bottom: 50%; 
 
    -ms-transform-origin: 100% 100%; 
 
    -webkit-transform-origin: 100% 100%; 
 
    transform-origin: 100% 100%; 
 
    -ms-transform: skewY(45deg); 
 
    -webkit-transform: skewY(45deg); 
 
    transform: skewY(45deg); 
 
} 
 

 
.wrap:after { 
 
    top: 50%; 
 
    -ms-transform-origin: 100% 0; 
 
    -webkit-transform-origin: 100% 0; 
 
    transform-origin: 100% 0; 
 
    -ms-transform: skewY(-45deg); 
 
    -webkit-transform: skewY(-45deg); 
 
    transform: skewY(-45deg); 
 
}

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