Webkit のみのアプローチを使用して境界線付きの透明な三角形を作成する方法

透明な塗りつぶしと境界線を使用した CSS 三角形の代替

CSS 境界線を使用するソリューションに加えて、Webkit のみの代替アプローチもあります。 ▲ Unicode 文字を利用して、黒い境界線を持つ透明な三角形を作成します:

<code class="css">.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}
</code>

<code class="html"><div class="triangle">&#9650;</div></code>

このコードは、-webkit-text-stroking プロパティを使用して、Unicode 文字の周囲に黒い輪郭を描画します。黒い三角形。 color プロパティが透明に設定されて三角形の塗りつぶしが非表示になり、その結果、黒い境界線が付いた透明な三角形が生成されます。

このアプローチは、CSS 境界線や SVG ベクトルを使用するためのシンプルで効率的な代替手段です。ただし、これは Webkit のみであることに注意することが重要です。つまり、Safari や Chrome など、このプロパティをサポートする Web ブラウザーでのみ機能します。

以上がWebkit のみのアプローチを使用して境界線付きの透明な三角形を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。