JavaScript を使用せずに CSS で角が丸い三角形を作成するにはどうすればよいですか?

CSS での 3 つの角が丸い三角形の作成

JavaScript を使用せずに角が丸いカスタムカラーの形状を実現するのは難しい場合があります。これに対処するには、CSS テクニックを使用して、望ましい美学を備えた視覚的に魅力的な三角形を生成できます。

角が丸い三角形を作成する 1 つのアプローチは、慎重に作成された変換と形状調整を備えた複数の要素を使用することです。 :before および :after 擬似要素を利用すると、単一のユニークな形状の要素のような錯覚を作り出すことができます。

どんなサイズでもピクセル完璧な結果を提供する洗練されたソリューションを次に示します:

.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%);
}

このアプローチを使用すると、多用途で視覚的に魅力的な三角形を簡単に作成でき、Web デザインの美的魅力を高めることができます。

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