如何創建一個具有表單的div？

Question

如何使用css創建這個div？

Answer 1

你可以用clip-path: polygon

div { 
 
    background: #666; 
 
    height: 100px; 
 
    width: 200px; 
 
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
 
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
 
}

<div></div>

Answer 2

做到這一點使用僞元素，你可以這樣來做。

div { 
 
    position: relative; 
 
    background: red; 
 
    width: 150px; 
 
    height: 80px; 
 
} 
 
div:before, 
 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 40px; 
 
} 
 
div:before { 
 
    background: red; 
 
    border-top: 40px solid transparent; 
 
    border-bottom: 40px solid transparent; 
 
    border-left: 40px solid white; 
 
} 
 
div:after { 
 
    border-top: 40px solid transparent; 
 
    border-bottom: 40px solid transparent; 
 
    border-left: 40px solid red; 
 
    left: 100%; 
 
}

<div></div>

Answer 3

使用僞元素我創建箭頭。請檢查一下。

.arrow { 
 
    border-top: 1px solid #333; 
 
    border-bottom: 1px solid #333; 
 
    padding-top: 5px; 
 
    height: 37px; 
 
    width: 60px; 
 
} 
 
.arrow:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    margin-left: 45px; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-top: 1px solid #333; 
 
    border-right: 1px solid #333; 
 
    -moz-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
} 
 
.arrow:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    margin-left: -15px; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-top: 1px solid #333; 
 
    border-right: 1px solid #333; 
 
    -moz-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
}

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