Robkwood Robkwood - 1 year ago 62
CSS Question

Transparent arrow on right side of image

I'm trying to put a transparent arrow on the right side of an image, vertically in the centre and showing the background image.

I've read this answer, and this codepen is basically exactly what I want, but I can't get my head around why it works and what I'd need to change to place it on the right hand side.

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 Source

There are two polygons with white background over the image, it is not an arrow but the space between the two polygons. Changin the width and the position of :before and :after you can move the triangle.

.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 some resolutions appears a pixel of the image in the bottom, can fix width bottom:-1px in .wrap::before, .wrap::after