How to Create a Transparent Triangle with a Black Border Using CSS?

Creating a Transparent Triangle with a Border Using CSS

Question:

How can we create a transparent triangle with a black border using CSS, excluding SVG vectors?

Answer:

WebKit-Only Solution:

A WebKit-exclusive approach involves utilizing the ▲ character:

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

.triangle {
-webkit-text-stroke: 12px black;
color: transparent;
font-size: 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">

This method creates a triangle shape using the WebKit-specific -webkit-text-stroke property, which outlines the text with a stroke of the specified color and thickness. The text itself is set to transparent, making the triangle effectively transparent.

The above is the detailed content of How to Create a Transparent Triangle with a Black Border Using CSS?. For more information, please follow other related articles on the PHP Chinese website!