[CSS] CSS implements triangles (2)

In the previous article: 

Two ways are mentioned to implement the triangle:

• border
• linear-gradient gradient

This article will use the third way: using pseudo-elements to realize the bubble triangle.

1. Solid bubble

In fact, strictly speaking, it is realized through border+pseudo-elements . For details, please refer to the following code:

/* 气泡三角 */
.triangle {
	width: 100px;
    height: 50px;
    background: #abc88b;
    border-radius: 5px;
    position: relative;
}
/* 上 */
.triangle1:before {
	content: "";
    width: 0px;
    height: 0px;
	border-bottom: 8px solid #abc88b;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: absolute;
	top: -8px;
	left: 40px;
}
/* 下 */
.triangle2:before {
	content: "";
    width: 0px;
    height: 0px;
	border-top: 10px solid #abc88b;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: absolute;
	bottom: -10px;
	left: 40px;
}
/* 左 */
.triangle3:before {
	content: "";
    width: 0px;
    height: 0px;
	border-right: 10px solid #abc88b;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 15px;
	left: -10px;
}
/* 右 */
.triangle4:before {
	content: "";
    width: 0px;
    height: 0px;
	border-left: 10px solid #abc88b;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 15px;
	right: -10px;
}

The renderings are as follows:

 Do you feel familiar, isn't this similar to the direct implementation of border? It's just a different way of writing it.

Compared with using border directly, using pseudo-elements does not need to create an additional div, it can be done on a div.

2. Hollow bubbles

After realizing the solid bubble, what should I do if I want a hollow one?

First of all, you must remove the background color and add a border;

border: 1px solid #abc88b;

Second, I need a triangle to cover my small solid triangle.

Then I added a pseudo-element before, and I can add an after. After is a small white triangle, which only needs to be one px smaller than the colored triangle to solve it.

The complete code is as follows:

.triangle {
	width: 100px;
    height: 50px;
    border: 1px solid #abc88b;
    border-radius: 5px;
    position: relative;
}
/* 上 */
.triangle1:before {
	content: "";
    width: 0px;
    height: 0px;
	border-bottom: 8px solid #abc88b;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: absolute;
	top: -8px;
	left: 40px;
}
.triangle1:after {
	content: "";
    width: 0px;
    height: 0px;
    border-bottom: 7px solid #ffffff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    position: absolute;
    top: -7px;
    left: 41px;
}
/* 下 */
.triangle2:before {
	content: "";
    width: 0px;
    height: 0px;
	border-top: 10px solid #abc88b;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: absolute;
	bottom: -10px;
	left: 40px;
}
.triangle2:after {
	content: "";
    width: 0px;
    height: 0px;
	border-top: 9px solid #ffffff;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	position: absolute;
	bottom: -9px;
	left: 41px;
}
/* 左 */
.triangle3:before {
	content: "";
    width: 0px;
    height: 0px;
	border-right: 10px solid #abc88b;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 15px;
	left: -10px;
}
.triangle3:after {
	content: "";
    width: 0px;
    height: 0px;
	border-right: 9px solid #ffffff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	position: absolute;
	top: 16px;
	left: -9px;
}
/* 右 */
.triangle4:before {
	content: "";
    width: 0px;
    height: 0px;
	border-left: 10px solid #abc88b;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 15px;
	right: -10px;
}
.triangle4:after {
	content: "";
    width: 0px;
    height: 0px;
	border-left: 9px solid #ffffff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	position: absolute;
	top: 16px;
	right: -9px;
}

The renderings are as follows:

 

 OK, after mastering these methods, it should not be a big problem to realize the triangle, and other methods will be added in the future!