CSSの三角形にドロップシャドウを適用するにはどうすればよいですか？

Question

私はCSSで、この三角形を持っている：

.triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 200px 200px 0 0; 
 
    border-color: #007bff transparent transparent transparent; 
 
}

<div class="triangle"></div>

私は斜辺ラインに1pxのシャドウを適用するにはどうすればよいですか？

Answer 1

box-shadowが動作しませんので、あなたが三角形にドロップシャドウフィルタを適用する必要があります。

.triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 200px 200px 0 0; 
 
    border-color: #007bff transparent transparent transparent; 
 
    -webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5)); 
 
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5)); 
 
}

<div class="triangle"></div>

Answer 2

あなたが角度の勾配を使用することによって国境を使用せずに、このを作ることができます。正直なところ

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 2em auto; 
 
    background: linear-gradient(to bottom right, #007bff 50%, rgba(0,0,0,.5) 50%, transparent 52%); 
 
}

<div></div>

Answer 3

人々はあなたがSVGを使用してセマンティックHTMLを書くことができたときにこれらの形状を使い続ける理由を、私は知りません。

.triangle { 
 
    height: 200px; 
 
    width: 200px; 
 
    color: #007bff; 
 
    -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5)); 
 
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5)); 
 
}

<svg class="triangle"> 
 
    <polygon points="0,0 200,0 0,200" fill="currentColor" /> 
 
</svg>