フォームを持つ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>