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>

 

      

 

posted @ 2016-02-15 11:37  qingyezhu  阅读(2286)  评论(2编辑  收藏  举报