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

当前位置 : 首页 > 网页制作 > CSS > css中的:before与:after的简单使用

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

来源: 作者: 时间:2016-02-19 09:07
直接上代码,不多说了!画三角形1)、 triangle{width: 0;height: 0; *border: 50px transparent solid;* *当没有这句时,至少有2个方向的边框才能成形,比如下面的一组

直接上代码,不多说了!

画三角形

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>
 

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>
 

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>

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

     

Tag:

相关文章

网友评论

<