Triangles

27 May 2026 in the blog section Updated: 16 Jun 2026

Create a div

Create a div with width: 0 and with thick borders. (I used different colours here to add some clarity.)

Remove the border that is opposite of where you want the point or 90 degree angle of your triangle.

div {
    width: 0;
    border: solid 30px orange;
    border-right: none;
}

Make the top border transparent:

div {
    width: 0;
    border: solid 30px orange;
    border-right: none;
    border-top-color: transparent;
}

Make bottom border transparent.

So now we have:

div {
    width: 0;
    border: solid 30px orange;
    border-right: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

You can use rotate: 180deg to point in the opposite direction, or any other direction you choose.

Add a background circle

You can add a background container using a ::before pseudo element.

div::before {
	content: '';
	display: block;
	width: 90px;
	height: 90px;
	background: black;
	border-radius: 50%;
	position: absolute;
	top: -45px;
	left: -65px;
	z-index: -10;
}