Use CSS to display triangles of various shapes

What I bring today is to use pure css style to draw triangles. Go directly to the code:

Let's explain a few styles first:

solid: Indicates that the line is a solid line. Commonly used lines are: dotted (dotted line), dashed (dashed line)

transparent: Indicates that the line is transparent.

Let's first look at the basic structure of the code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Triangle Display</title>
		<style></style>		
	</head>
	<body>
		<div id="div1"></div>		
	</body>
</html>

A very simple piece of code, there is only one div tag, the id is div1.

1. Upper triangle

<style>
	#div1 {
	        width:0px;
		height:0px;
		border-right:30px solid transparent;
		border-bottom:30px solid red;
		border-left:30px solid transparent;
	}
</style>

2. Lower triangle

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid red;
		border-right:30px solid transparent;
		border-left:30px solid transparent;
	}
</style>

3. Left triangle

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid transparent;
		border-bottom:30px solid transparent;
		border-left:30px solid red;
	}
</style>

4. Right triangle

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid transparent;
		border-right:30px solid red;
		border-bottom:30px solid transparent;
	}
</style>

5. Upper left triangle

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid red;
		border-right:30px solid transparent;
		border-bottom:30px solid transparent;
		border-left:30px solid red;
	}
</style>

6. Upper right triangle

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid red;
		border-right:30px solid red;
		border-bottom:30px solid transparent;
		border-left:30px solid transparent;
	}
</style>

7. Lower left triangle

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid transparent;
		border-right:30px solid transparent;
		border-bottom:30px solid red;
		border-left:30px solid red;
	}
</style>

8. Lower right triangle

<style>
	#div1 {
		width:0px;
		height:0px;
		border-top:30px solid transparent;
		border-right:30px solid red;
		border-bottom:30px solid red;
		border-left:30px solid transparent;
	}
</style>

This is the end of the triangle drawing. Do you think it is fun?

Use CSS to display triangles of various shapes

Guess you like