Web ページの三角形のエッジは依然として半透明です。今日のデザイナーはますます優れており、CSS もそれに追いつく必要があります。

需要

今日グループでリクエストがありました。このような角の欠けた三角形を作成し、半透明の影を付ける方法です。

分析

これを実現するには、次のように CSS を使用して三角形を作成し、オンラインでコードを見つけます。

境界線を透明にできるかどうか試したことがないので、テストする必要があります。

次に、赤を rgba に置き換えることができるかどうかをテストしてみましょう。それができれば、戦いの半分は勝利したことになります。

簡単なテストの後、動作します。

.sanjiao
{
位置: 相対;
幅: 0;
高さ: 0;
border-bottom: 100px ソリッド rgba(0,0,0,.5);
border-left: 100px ソリッド透明;
}

次のステップは、影の三角形に少し小さい白い三角形を挿入することです。

達成しました

リーリー

この時点で、角と影が欠けた div が完成します。 右側の白い div とその下の通常の長方形の div については、ここでは実装されなくなりました。