CSS Shapes

Here is a CSS triangle.

here's the HTML code:

<div class="xyz"></div>

here's the CSS code:

div.xyz
{
 width: 0;
 height: 0;
 border-left: 20px solid red;
 border-right: 20px solid transparent;
 border-top: 20px solid transparent;
 border-bottom: 20px solid transparent;
 }

The trick is to set the element to have 0 width and height, then use a thick border, then make the sides of border transparent except one side.

Here is the same element but with border sides colored, and the element has width height of 10 px, and with text “A”.

CSS triangle can save you from using a image, which is slower because of HTTP request.

CSS Shapes

The border, border radius, and opacity, and CSS transformation can be combined to create many different shapes.

Here is a example of pacman.

Here is the CSS code:

div.pacman46958 {
width:0;
height:0;
line-height:0;
border:20px solid red;
border-radius:20px;
border-left:20px solid transparent;
}

Basically, you set a thick border, make the corners round, then set one side of border to be transparent, and also set width and height to be 0 so there is no hole in the middle.

[see CSS: Round Corners]

Using Unicode for Triangle and Shapes

A better solution is to use Unicode. Here's a example:

▶

Here is the HTML code:

<p><span class="unicode-triangle-87339">▶</span></p>

Here is the CSS:

span.unicode-triangle-87339 {font-size:40px;color:red}

Best to set your HTML to use UTF-8 encoding. See: Character Sets and Encoding in HTML .

For more Unicode shapes, see:

• Unicode: Geometric Shapes 🔴🟥🔺
• Unicode: Box Art ░ ▒ ▓
• Unicode: Arrows → ➵ ➛ ➲ ➤
• Unicode: User Interface Icons 🗑

Using 2D Transform and SVG for Shapes

You can use CSS3 2D Transform to create much more shapes. [see CSS: 2D Transform]

The most general way to create arbitrary shapes is SVG. [see SVG: Basic Examples]