矩形のdivで三角形のくさびを取得する

Question

私はこのように矩形のdivを持っています。

しかし、私はこのように、それに三角くさびが好きでした：

、私の貧弱な編集を無視これらは完璧な白い三角形である必要があり、代わりに不安定。

私はこれを行うにはいくつかの方法を見てきましたが、私はちょうど最も効果的でベストプラクティスなのか疑問に思っていました。

Answer 1

あなたが探しているものであるかどうかはわかりませんが、表示される画像のようにdivになります。

<style> 
#wedge { 
    width: 200px; 
    height: 0; 
    border-top: 100px solid black ; 
    border-right: 100px solid transparent; 
    border-bottom: 100px solid black; 
    border-left: 100px solid transparent; 
} 
</style> 


<div id="wedge"></div>