如何制作自定义形状div或操纵div

Question

我想制作一个类似的div，但我不知道。我可以用svg或图像来做，但这不是我想要的。这是我的代码

HTML

<div class="FooterWhite"> </div>

CSS

.FooterWhite {
background-color:white;
height:50%;
width:100%;
}

Answer 1

试试这个：

 .shape { 
    width: 200px; 
    height: 70px; 
    background: #000;
    margin: 50px;
    position: relative;
}

.shape:before {
    display: block;
    content: "";
    height: 0;
    width: 0;
    border: 50px solid #f00;
    border-bottom:50px solid transparent;
    border-left: 50px solid transparent;
    position: absolute;
    top: 70px;
}.shape:after {
    display: block;
    content: "";
    height: 0;
    width: 0;
    border: 50px solid #f00;
    border-bottom: 50px solid transparent;
    border-right:50px solid transparent;
    position: absolute;
    top: 70px;
    left:100px;
}

JSFIDDLE DEMO