divに「矢印」を作成する最良の方法

Question

添付画像のように見えるものを作成しようとしています。これを行う方法に苦労しています。私はCSSでこれを行う方法が大好きですが、今はイメージを使用しています。

上にポイントを作る場所を見て、それを横にすることができましたが、黒い部分のインデントを行う場所を見つけることができません。

あなたはこちらのページを参照することができますamazingmoves.com/dev

Answer 1

サンプルを。

*{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/