Прозрачная стрелка на правой стороне изображения

Я пытаюсь поместить прозрачную стрелку с правой стороны изображения, вертикально в центре и показывая фоновое изображение.Прозрачная стрелка на правой стороне изображения

Я читал this answer и this codepen в основном именно то, что хочу, но я не могу понять, почему он работает и что мне нужно изменить, чтобы поместить его с правой стороны.

Codepen код:

.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); 
}

источник

2016-06-27 Robkwood

Есть два многоугольника с белым фоном над изображением, это не стрела, а пространство между двумя полигонами. Чангин шириной и положением :before и :after вы можете перемещать треугольник.

.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>

В Firefox в некоторых разрешениях появляется пиксель изображения в нижней части, можно зафиксировать ширину bottom:-1px в .wrap::before, .wrap::after

источник

2016-06-27 09:50:53 blonfu

Основные CSS свойства, которые необходимо изменить в transform-origin и transform с некоторыми другими изменениями, как это делается ниже:

.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>

источник

2016-06-27 10:01:11

Прозрачная стрелка на правой стороне изображения

ответ

Смежные вопросы