How to Create a Transparent Triangle with a Border in CSS?

Creating a Transparent Triangle with Border Using CSS

One of the common challenges in CSS is creating shapes with borders. One such shape that can be tricky to create is a transparent triangle with a visible border.

Conventional Approach

As you mentioned in your question, one common approach is to use borders to create the illusion of a triangle:

.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;
}

While this method can achieve the desired shape, it involves using a trick with borders, which may not be ideal in certain situations.

WebKit-Only Solution

For a more elegant approach, you can use a WebKit-only solution that leverages the ▲ character:

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

This technique utilizes the -webkit-text-stroke property to create a stroke around the character, resulting in a triangle-like shape. The color property is set to transparent to make the character itself invisible.

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