Inside transparent arrow on the top

Question

I would like to make a transparent arrow over an image. This triangle should be indented in a block and show the background image.

Desired output:

I used skewX() property that @web-tiki had explained here but I want it to display on the top of the border rather than on the bottom of image and have this issue:

A fiddle demo of my code is available here

Can anyone tell me why it's not working in my case?

Answer 1

As stated in the question, your case is a bit different from the example that was provided by web-tiki. In the example that you were referring to, the border with the transparent cut was included as the bottom border for the image whereas you need it as the top border of the plain text area.

The expected output can be achieved with the same skew technique described in that answer. However, it needs to be tweaked a bit to match your case.

• First thing is, the skewed pseudo-elements (that produce the border) should be added to the container of plain text area and not the top section which holds the image. This part you have already done correctly.
• Next, you need to position the border such that even with the border the height of your text container will be equal to the other two images placed by its side. For this, you need to position the elements that form the border within the plain text container (top: 0%) instead of above it (bottom: 100% in your code).
• Then, if the text container has a non-transparent background, you need to clip it such that it is not present behind the elements that is creating the border effect. This can be achieved by adding a padding-top on the text container equal to the height of the border pseudo-elements and then setting background-clip: content-box to it.
• Finally, you need to move the entire bottom part up by the same number of pixels as the height of the border in order for the top image to be seen through the transparent cut out area. This can be done by adding a negative margin-top to the bottom container.

Putting it altogether your code should be similar to the below snippet to achieve the effect that you need. (Note: Your fiddle has way too much code and so I have created a simpler sample for the demo).

.section {
  height: 200px;
  width: 500px;
  background: url(http://lorempixel.com/500/200/nature/3);
}
.bottom-container {
  margin-top: -15px;
  height: 100px;
  width: 500px;
}
.text,
.middle-image,
.right-image {
  float: left;
  height: 100%;
  width: calc(100% / 3);
}
.middle-image {
  background: url(http://lorempixel.com/200/100/nature/2);
}
.right-image {
  background: url(http://lorempixel.com/250/100/nature/1);
}
.text {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding-top: 15px;
  text-align: center;
  line-height: 85px;
  background: #F7F7F7; /* Just for demo */
  background-clip: content-box; /* needed only if your background is not transparent */
  overflow: hidden;
}
.text:after,
.text:before {
  position: absolute;
  content: '';
  top: 0px;
  height: 15px;
  background: rgb(215,182,115);
}
.text:before {
  left: 0px;
  width: 25%;
  transform-origin: left bottom;
  transform: skew(45deg);
}
.text:after {
  right: 0px;
  width: 75%;
  transform-origin: right bottom;
  transform: skew(-45deg);
}

<!-- prefix free library to avoid browser prefixes in CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<section class="section">
</section>
<div class="bottom-container">
  <div class="text">Some text</div>
  <div class="middle-image"></div>
  <div class="right-image"></div>
</div>

Screenshot:

^{Note: The images that are displayed when the snippet is executed could be different from those in the screenshot because they are random placeholder images}