Как создать div, который имеет форму?

Question

Как создать этот div, используя css?

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>