Best way to create "arrow" in div

Question

I'm in trying to create something that looks like the attached image, and am struggling with how to do this so it is responsive. I'd love a way to do this with css, but right now I'm just using images.

Ive seen where to make the points on the top, and was able to get it to go on the side, but I cannot find where to do the indent for the black section.

You can see the page here: amazingmoves.com/dev

http://stackoverflow.com/questions/13774061/how-to-make-one-side-of-a-div-pointy-with-css http://stackoverflow.com/questions/23652877/css-how-to-make-rectangle-with-pointed-sides http://stackoverflow.com/questions/27017502/how-can-i-create-div-with-a-pointed-top-with-css — Scott, Mar 31 '16 at 16:58

Felix A J · Answer 1 · 2016-03-31T17:20:11.227

A sample.

*{box-sizing: border-box;}
.wrap{
  background: url(http://lorempixel.com/400/200/nature/);
  -webkit-background-size: cover;
  background-size: cover;
  height: 300px;
  width: 600px;
  overflow: hidden;
  position: relative;
}
ul{
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 0;
}
ul *{
  position: relative;
  z-index: 1;
}
li{
  color: #fff;
  list-style: none;
  float: left;
  margin: 0 10px;
  padding: 0 30px;
  position: relative;
  width: 30%;
}
li:before, li:after{
  background: rgba(0,0,0,.5);
  content: '';
  left: 0;
  height: 50%;
  position: absolute;
  width: 100%;
}
li:before{
  top:0;
  transform: skewX(20deg);
}
li:after{
  bottom: 0;
  transform: skewX(-20deg);
}
li:nth-child(2):after, li:nth-child(2):before{
  background: rgba(255,0,0,.5);
}

<div class="wrap">
  <ul>
<li>
  <h3>Title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <a href="" class="more">More</a>
</li>
<li>
  <h3>Title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <a href="" class="more">More</a>
</li>
<li>
  <h3>Title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <a href="" class="more">More</a>
</li>
  </ul>
</div>

https://jsfiddle.net/afelixj/rmcy7dtq/

Best way to create "arrow" in div

1 Answers1