1. Principle analysis

Insert picture description here
As shown in the figure above, a div box includes margin+border+padding+content
and the junction of these borders, like the red box in the figure, there will be slashes at the junction of the upper, lower, left, and right borders. We use this feature, and then Given different width and height, we can get the triangle we want.

Two, actual operation

1. Clearly understand the principle through examples

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				height: 20px;
				width: 20px;
				border: 20px solid;
				border-color: #FF0000 #FFFF00 aqua aquamarine; 
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

Let’s look at the code. I made a box with a width and height of 20px,
and then set the width of the upper, lower, left, and right borders to 20px, and we can get the result of the following picture.
Insert picture description here
From the picture, we can clearly see the diagonal lines at the four top corners. , And the css triangle can take advantage of this feature.
Look at a piece of code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				height: 0;
				width: 0;
				border: 80px solid;
				border-color: #FF0000 #FFFF00 aqua aquamarine; 
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

At this time, I set the width and height of the div box to 0, and only set the width of the border, so that the transparent box in the middle of the above picture can be removed, as shown in the following picture,
Insert picture description here
can you clearly see that there are four triangles? Up

2. Actual combat triangle

So our requirement is as long as a right-pointing triangle, how to do it?
Look at a piece of code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				height: 0;
				width: 0;
				border: 80px solid;
				/* border-color: #FF0000 #FFFF00 aqua aquamarine; */
				border-color: transparent transparent transparent aquamarine; 
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

Let's look at how the code is written. I set the colors of the three borders except the left border to be transparent. I think now you don't need to tell me to know what's going on.
Insert picture description here
The same direction as the ideal is downward, left, upward, just change the transparent color of border-color, the codes are respectively

border-color: #FF0000 transparent transparent transparent; 
border-color: transparent #FFFF00 transparent transparent;
border-color: transparent transparent aqua transparent;

Insert picture description here

We got the triangles in this way, and when you apply them to the project, you can set the position where they appear according to specific requirements.
In the same way, how do you want to operate the following triangle, just look at the code

border-color: transparent transparent #FF0000 #FF0000 ;

Of course, we can also make irregular triangles. Based on this principle, the positioning and css3 rotation characteristics are used. Just look at the following example.

3. Making the bubble frame

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.outer {
     
     
				margin: 100px auto;
				position: relative;
				width: 200px;
				height: 100px;
				border-radius: 20px;
				line-height: 100px;
				background-color: #FF0000;
				color: #fff;
				text-align: center;
			}
			.angle {
     
     
				position: absolute;
				top: -30px;
				right: -90px;
				height: 0;
				width: 0;
				border-top: 80px solid;
				border-left: 80px solid;
				border-right: 40px solid;
				/* border-bottom: 40px solid; */
				/* border-color: #FF0000 #FFFF00 aqua aquamarine; */
				/* border-color: #FF0000 #FF0000 transparent transparent; */ 
				border-color: transparent #FF0000 #FF0000  transparent;
				transform: rotateZ(100deg);
			}
		</style>
	</head>
	<body>
		<div class="outer">
			哈哈哈哈哈哈哈
			<div class="angle"></div>
		</div>
		
	</body>
</html>

Insert picture description here
Okay, that's it for sharing the css triangle, come on, IT guys!

In-depth analysis of the css triangle principle