css中的:before与:after的简单使用

Posted 2020-06-13

直接上代码，不多说了！

画三角形

1）、

<style type="text/css">
			.triangle{
				width: 0;
				height: 0;
				/*border: 50px transparent solid;*//*当没有这句时，至少有2个方向的边框才能成形，比如下面的一组*/

				border-top: 50px solid black;
				border-right: 50px solid purple;
				/*border-bottom: 50px solid blue;
				border-left: 50px solid red;*/
			}
		</style>
<div class="triangle"></div>

　　

2）、

<style type="text/css">
			.triangle1{
				width: 0;
				height: 0;
				border: 50px transparent solid;/*transparent表示边框颜色是透明的，solid表示边框是实线的*/
				border-top-color: black;
				border-bottom-color: black;
			}
		</style>
<div class="triangle1"></div>

　　

 

 

3)、类似QQ或微信中的提示框，带有三角形的框

<style type="text/css">
			.wechat-triangle{
				position: relative;
				width: 150px;
				height: 36px;
				border: 1px solid black;
				border-radius: 5px;
				background: rgba(245, 245, 245, 1);
			}

			/*.wechat-triangle:before{
				content: "";
				display: block;
				position: absolute;
				top: 8px;
				width: 0;
				height: 0;
				border: 6px transparent solid;
				left: -12px;
				border-right-color: rgba(245,245,245,1);
			}*/

			.wechat-triangle:before, .wechat-triangle:after{
				content: "";
				display: block;
				position: absolute;
				top: 8px;
				width: 0;
				height: 0;
				border: 6px transparent solid;
			}

			.wechat-triangle:before{
				left: -11px;
				border-right-color: rgba(245,245,245,1);
				z-index: 1;
			}

			.wechat-triangle:after{
				left: -12px;
				border-right-color: rgba(0,0,0,1);
				z-index: 0;
			}

			.wechat-triangle1{
				width: 120px;
				height: 30px;
				position: relative;
				border: 1px solid black;
				border-radius: 5px;
				background: rgba(245,245,245,1);
			}

			.wechat-triangle1:before, .wechat-triangle1:after{
				content: "";
				width: 0;
				height: 0;
				display: block;
				position: absolute;
				top: 5px;
				border: 4px transparent solid;
			}

			.wechat-triangle1:before{
				left: -8px;
				border-right-color: rgba(245,245,245,1);
				z-index: 1;
			}

			.wechat-triangle1:after{
				left: -9px;
				border-right-color: rgba(0,0,0,1);
				z-index: 0;
			}
		</style>

	<div class="wechat-triangle"></div>
	<div class="wechat-triangle1"></div>

　　其中rgba是由颜色与透明度组成，透明度是[0,1]。