CSSで枠線付きの透明な三角形を作成するにはどうすればよいですか?

CSS を使用した枠線付きの透明な三角形の作成

CSS での一般的な課題の 1 つは、枠線付きの図形を作成することです。作成するのが難しい形状の 1 つは、境界線が見える透明な三角形です。

従来のアプローチ

質問で述べたように、一般的なアプローチの 1 つは次のとおりです。境界線を使用して三角形の錯覚を作成します:

.triangle:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: 1px;
  margin-left: 2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}

.triangle:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid black;
}

この方法では目的の形状を実現できますが、境界線を使用したトリックを使用する必要があるため、状況によっては理想的ではない可能性があります。

WebKit のみのソリューション

より洗練されたアプローチとして、▲文字を利用する WebKit のみのソリューションを使用できます。

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

この手法では、 -webkit-text-ストローク プロパティを使用すると、文字の周囲にストロークが作成され、三角形のような形状になります。カラープロパティは透明に設定され、キャラクター自体が見えなくなります。

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