如何使用 CSS 創建帶有黑色邊框的透明三角形？

使用CSS 建立一個有邊框的透明三角形

問題：

我們怎麼才能使用CSS 建立一個帶有黑色邊框的透明三角形，不包括SVG 向量？

答案：

僅WebKit 的解決方案：

WebKit 獨有的方法涉及使用▲ 字元：

WebKit 獨有的方法涉及使用▲ 字元：
>

<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">

.triangle {
-webkit-text-lines : 12px 黑色;
顏色: 透明;

字體大小: 200px;

<pre class="brush:php;toolbar:false">

}

<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">

<pre class="brush:php;toolbar:false">

▲ div>

此方法使用WebKit 特定的-webkit-text-lines 屬性建立一個三角形，該屬性使用指定顏色和粗細的筆畫勾勒出文字的輪廓。文字本身設定為透明，使三角形有效透明。

以上是如何使用 CSS 創建帶有黑色邊框的透明三角形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！