如何使用 CSS 创建带有黑色边框的透明三角形？

使用 CSS 创建一个带边框的透明三角形

问题：

我们怎样才能使用 CSS 创建一个带有黑色边框的透明三角形，不包括 SVG 矢量？

答案：

仅 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">

▲ div>

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

此方法使用 WebKit 特定的 -webkit-text-lines 属性创建一个三角形，该属性使用指定颜色和粗细的笔画勾勒出文本的轮廓。文本本身设置为透明，使三角形有效透明。