css中的:before與:after的簡單使用

直接上程式碼，不多說了！

畫三角形

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]。

4）、提示框，當滑鼠放到上面時，就會有提示資訊

 

<style>
           .tip{
                display: inline-block;
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                position: relative;
                border: 1px solid #ccc;
                cursor: pointer;
            }

            .tip:before, .tip:after{
                position: absolute;
                opacity: 0;
            }

            .tip:before{
                content: '';
                width: 0;
                height: 0;
                border-width: 6px;
                border-style: solid;
                border-color: #222 transparent transparent transparent;
                top: -6px;
            }

            .tip:after{
                content: attr(data-tips);
                white-space: nowrap;
                font-size: 14px;
                color: #fff;
                background-color: #222;
                top: -36px;
                left: 5px;
                border-radius: 6px;
                padding: 0 10px;
                text-shadow: 0 0 5px #000;
                -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
                -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
                -moz-box-sizing: boder-box;
                -webkit-box-sizing: boder-box;
                box-sizing: boder-box;
            }            

            .tip:hover:before, .tip:hover:after{
                opacity: 1;
            }
</style>
<div class="tip" data-tips="沉冤得雪魂歸戰場">琅琊榜</div>