Transparent arrow on right side of image

Question

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

score 0 · Accepted Answer · 2016-06-28T08:16:02.450

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

score 0 · Answer 2 · answered Jun 27 '16 at 10:01

Main css properties that you need to change are transform-origin and transform with some other changes as done below:

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

Transparent arrow on right side of image

2 Answers2