Css3は三角形のアイコンを作成します

ウェブサイトを構築する過程で、小さなアイコンを追加するために、いくつかのコンテナに装飾効果を追加する必要がある場合があります。今日は、Css3を使用して三角形のアイコンを作成する方法を紹介します。

Css3以前は、transparentプロパティを使用して背景色を透明にし、CSS3ではopacityプロパティを使用して背景色を透明にしました。

注意点：

1.まず、コンテナボックスの幅と高さを0pxに設定する必要があります。

2.これは、rgba色の不透明度を使用して色の透明度を制御し、rgba 3色の後に透明度を設定します。rgba（0,0,0,0.0）最後の0.0は、不透明度プロパティである色の透明度を設定します。値の範囲は0.0から1で、0.0に設定すると、完全に透明になります。

以下はhtmlコードです：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3实现三角形</title>
    <style>
          .triangle{
              width: 0;
              height: 0;
              border-bottom: 30px solid rgba(0,0,0);
              border-left:30px solid rgba(255,0,0);
              border-right:30px solid rgba(84,255,159);
              border-top:30px solid rgba(0,191,255);
          }
    </style>
</head>
<body>
    <div class="triangle">
    </div>
</body>
</html>

まず、4方向の境界線を30pxに設定し、実線を表示し、4辺に異なる色を追加します。その辺を表示する必要がある場合は、他の3辺の透明度を0.0に設定して、その方向に三角形を表示します。。

          .triangle{
              width: 0;
              height: 0;
              border-bottom: 30px solid rgba(0,0,0,0.0);
              border-left:30px solid rgba(255,0,0,0.0);
              border-right:30px solid rgba(84,255,159,0.0);
              border-top:30px solid rgba(0,191,255);
          }

CSSを変更すると、下向きの三角形である上部の三角形が表示されます。

さらに、CSSのコードを合理化し、境界線を一定の色に均一に設定し、色の透明度を0.0に設定できます。最後に、どの方向の三角形が必要か、その方向のプロパティをリセットします。

          .triangle{
              width: 0;
              height: 0;
              border: 30px solid rgba(0,191,255,0.0);
              border-top:30px solid rgba(0,191,255,1);
              /*border-bottom: 30px solid rgba(0,0,0,0.0);*/
              /*border-left:30px solid rgba(255,0,0,0.0);*/
              /*border-right:30px solid rgba(84,255,159,0.0);*/
              /*border-top:30px solid rgba(0,191,255);*/
          }

最終的な表示効果は、4つの境界線を設定した効果と同じです。

さらに、transparentプロパティを使用して、背景色を透明にして三角形を作成できます。

Css3は三角形のアイコンを作成します

おすすめ