Question

我正在尝试制作看起来像附加图像的内容，并且正在努力解决如何做到这一点，因此它具有响应性。我喜欢用css做这个的方法，但是现在我只是使用图像。

我已经看到了哪里可以让积分在顶部，并且能够让它在侧面，但我找不到在哪里做黑色部分的缩进。

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

Answer 1

样本。

＆＃13;

*{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);
}

＆＃13;

<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>

＆＃13;

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

在div中创建“箭头”的最佳方法

1 个答案: