html - Border with a transparent centred arrow

Question

I am trying to style a div with a bottom-border that has a downward-pointing arrow. The div will have an image in it, and should not have a top, right or left border. The fill of the downward-pointing arrow should be either the same as the div or transparent.

I have been able to get it to work for the most part using the code below:

.hero {
  position: relative;
  background-color: yellow;
  height: 320px !important;
  width: 100% !important;
  border-bottom: 1px solid red;
}
.hero:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -50px;
  width: 0;
  height: 0;
  border-top: solid 50px #e15915;
  border-left: solid 50px transparent;
  border-right: solid 50px transparent;
}

<div class="hero"></div>

Answer 1

There are two methods to achieve this using CSS3. One is using skewX on pseudo-elements while the other is using rotate on pseudo-elements. Both the methods are also responsive.

Using Skew:

This method is adapted from web-tiki's answer in this thread. It basically uses two pseudo-elements (with roughly 50% width of the container) that are skewed in opposite directions and positioned appropriately to arrive at the arrow shape. The shapes have borders where as the background is set to transparent meaning the pseudo-elements would produce a bottom border + downward arrow effect. The arrow fill would always be transparent (or body color) in this sample.

body {
  background: rgb(245, 242, 242);
}
.bordered {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 10px;
  line-height: 200px;
}
.bordered:after,
.bordered:before {
  position: absolute;
  content: ' ';
  height: 8px;
  width: 50%;
  bottom: 0px;
}
.bordered:before {
  left: 0px;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
  transform-origin: left bottom;
  transform: skewX(45deg);
}
.bordered:after {
  right: 0px;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  transform-origin: right bottom;
  transform: skewX(-45deg);
}
.bordered img {
  width: 150px;
  padding: 25px;
  vertical-align: middle;
}
/* Just for demo */

.bordered {
  transition: all 1s;
  text-align: center;
}
.bordered:hover {
  height: 250px;
  width: 250px;
  line-height: 250px;
}

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

<div class="bordered">
  <img src="http://i.imgur.com/0Xqum3A.png" />
</div>