CSSを使って矢印を作る方法は？

Question

私はあなたたちはカスタムアップ矢印を作るために私を助けてくださいすることができ、CSSに新しいです：以下 私は前とCSSプロパティの後に使用して矢印を作りたいだけのdivと私のHTMLのdivです：私たちは

<div class="triangle-with-shadow"></div> 

Answer 1

CSSコードの下で試してみました：

.triangle-with-shadow { 
    width: 100px; 
    height: 100px; 
    position: relative; 
    z-index: 5; 
} 
.triangle-with-shadow:after { 
    content: ""; 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    background: white; 
    border: 1px solid; 
    transform: rotate(45deg); 
    top: 75px; 
    left: 25px; 
    border-width: 1px 0 0 1px; 
} 
.triangle-with-shadow:before { 
    width: 100px; 
    background: white; 
    height: 100px; 
    position: absolute; 
    content: ""; 
    top: 100px; 
    border: 1px solid; 
}