CSS は三角形を実装し、div は三角形のギャップを実装します。

1. 三角形を実装するCSS

インタビューの質問や日常的なニーズで、純粋な CSS を使用して三角形を実装する例が時々出てきますが、現時点では、私の知識に基づいて 2 つの解決策しか提供できません。

1 つ目は、最も一般的に使用される方法であり、ボーダー方法です。

1-1ボーダー実装トライアングル

div{
      border:40px solid;
      border-left-color: lightslategrey;
      border-right-color: lightcoral;
      border-top-color: lawngreen;
      border-bottom-color: lightgreen;
      box-sizing: border-box;
      width: 40px;
}

効果は以下の通りで、ある方向の三角形が欲しい場合は、他の角度の色を透明に設定するだけです。

たとえば、ピンクの三角形だけが必要です

/*顺序分别是上右下左*/
border-color: transparent lightcoral transparent transparent;

1-2 Linear-gradient()を使用して三角形を実装する

div{
  width: 50px;
  height: 50px;
  background: linear-gradient(-45deg, red 50%, transparent 50% ) ;
}

レンダリングは次のとおりです。

そこで、 linear-gradient()が CSS の背景のグラデーション関数であることを簡単に紹介しましょう。

最初のパラメータは開始角度を表します。角度図については、インターネットで見つけた図です。-45 度は右下隅から左上隅までを意味し、135 度は左上隅から右下隅までを意味します。方向を直接指定することもできます（左/右/上/下から左/右/上/下）。

2 番目のパラメータは色を指定します。グラデーション効果を実現するには、最後の 50% を書き込むかどうかを選択できるため、通常は複数の色を指定する必要があります。書かれている場合は、赤が 50% を占めることを意味します。ここが強調点です。！！2 番目のパラメーターのパーセンテージが 2 番目のパラメーターのパーセンテージ以上の場合、グラデーションは発生しません。たとえば、

  {
    background: linear-gradient(-45deg, red 50%, blue 50% ) ;
  }

各要素が50%=50%を占めるため、途中のグラデーション効果はありませんが！


  {
    background: linear-gradient(-45deg, red 20%, blue 50% ) ;
  }

グラデーションもあるだろうし

2. div で欠けている角を実現するには、3 番目の方法を使用します。

 width: 200px;
 height: 50px;
 background: linear-gradient(-45deg, transparent 20px, blue 0 ) ;

CSS は三角形を実装し、div は三角形のギャップを実装します。

おすすめ