如何实现div的前卫底部，如下图所示

Question

我想在不使用图像切片技术的情况下实现这一目标。是否可以使用CSS？

Answer 1

我将对此做一个简短的回答，但是缩写比简单的是更简洁。

最有可能的是，你需要在你的CSS中使用透明度。 有关更多信息，请查看此链接。

https://css-tricks.com/snippets/css/css-triangle/

我建议谷歌是个好地方。

Answer 2

我会给你一个起点。它与您的图像不完全相同，只是为了显示它是如何完成的：

＆＃13;

＆＃13;

.shapeme {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 50px solid red;
    position:relative;
    margin-top:40px;
}
.shapeme:after{
    content:"";
    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 40px solid grey; 
    position:absolute;
    top:-50px;
    left:-100px;
}
.shapeme:before{
    content:"";
    background:grey;
    position:absolute;
    top:-90px;
    height:40px;
    width:200px;
    left:-100px;
}

＆＃13;

<div class="shapeme">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用border属性和伪元素来实现相同的功能。 请参阅css-tricks中的这篇文章。

Answer 4

＆＃13;

＆＃13;

.arrow-down {
  width: 0; 
  height: 0;  
  border-left: 20px solid transparent;
  border-right: 20px solid transparent; 
  border-top: 20px solid #f00;
} 

＆＃13;

<div class="arrow-down"></div>

＆＃13;

＆＃13;

＆＃13;