CSS test: shapes and line numbers

A page for trying CSS: each chapter shows the result and the rules behind it. The code blocks of the site itself are in CSS test 2; an animated drawing is in A tram drawn with CSS. More about CSS.

Triangles from borders

An element with no width and no height is only its borders, and the borders meet at an angle. Make three of them transparent, and the fourth is a triangle:

.down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #79849B; }

The bottom border makes a triangle that points up:

.up { width: 0; height: 0; border: 60px solid transparent; border-bottom-color: #53BA88; border-top: 0; }

A triangle outline

A smaller white triangle on top of a green one leaves a green outline. The white one is a ::after pseudo-element, so the HTML stays one div:

.outline { position: relative; width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #53BA88; border-top: 0; } .outline::after { content: ""; position: absolute; left: -44px; top: 8px; width: 0; height: 0; border: 44px solid transparent; border-bottom-color: #ffffff; border-top: 0; }

A square and a circle

The same square with border-radius: 50% is a circle:

.square { width: 100px; height: 100px; background: #A58CB6; } .circle { width: 100px; height: 100px; background: #A6BECF; border-radius: 50%; }

Line numbers with CSS counters

CSS can count elements and print the number before each. The numbers are not part of the text, so they are not copied with it:

.lines { counter-reset: line; } .lines span { display: block; counter-increment: line; } .lines span::before { content: counter(line) " "; user-select: none; }

counter-reset starts the counter at zero on the container, counter-increment adds one for each line, and user-select: none keeps the numbers out of a selection.

Article authors: Andrei Olegovich, Klavdiya Kondakova