在 div 中创建“箭头”的最佳方法 [重复]答案

【问题标题】：Best way to create "arrow" in div [duplicate]在 div 中创建“箭头”的最佳方法 [重复]
【发布时间】：2016-07-20 06:10:57
【问题描述】：

我正在尝试创建看起来像附加图像的东西，并且正在努力解决如何做到这一点，以便它具有响应性。我很想用 css 来做这件事，但现在我只是使用图像。

我已经看到在顶部制作点的位置，并且能够将它放在一边，但我找不到在哪里为黑色部分进行缩进。

您可以在此处查看页面：amazingmoves.com/dev

【问题讨论】：

stackoverflow.com/questions/13774061/…stackoverflow.com/questions/23652877/…stackoverflow.com/questions/27017502/…

标签： css image arrows

【解决方案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/

【讨论】：