CSS のみを使用して角が丸い三角形を作成するにはどうすればよいですか?

CSS を使用して角が丸い三角形を実現する

この記事では、カスタム色の三角を作成するという課題に取り組みます。 JavaScript や HTML5 キャンバスを使用せず、純粋な CSS を使用した丸い三角形support.

問題ステートメント

目標は、画像オーバーレイや JS ベースの技術に頼らずに、以下に示すような形状を作成することです。

【三角丸のイメージ】三角形]

ソリューション

これは、著者のオリジナルのアイデアからインスピレーションを得たエレガントな CSS ソリューションです:

.triangle {
  position: relative;
  background-color: orange;
  text-align: left;
}

.triangle:before,
.triangle:after {
  content: '';
  position: absolute;
  background-color: inherit;
}

.triangle,
.triangle:before,
.triangle:after {
  width: 10em;
  height: 10em;
  border-top-right-radius: 30%;
}

.triangle {
  transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
}

.triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}

.triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

説明

このソリューションは、複数の CSS 変換を組み合わせて目的の結果を実現しますshape:

• .triangle: 基本三角形を定義し、その背景色を設定します。
• .triangle:before、.triangle:after: 追加用に 2 つの疑似要素が追加されました
• パーセントベースの寸法: どのサイズでも均等に拡大縮小できるように、すべての要素の幅と高さは 10em です。
• Border-top- right-radius: 右上隅の半径を設定し、丸みを付けます。効果。
• 変換: 一連の回転、傾斜、スケールを適用して三角形を回転し、楕円形を調整します。特定の値は、希望するアスペクト比に応じて若干の調整が必要な場合があります。

最終結果は、完全に CSS で作成された、ピクセル完璧な三隅の丸い三角形です。

以上がCSS のみを使用して角が丸い三角形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。