常用的css样式-使用伪类制作箭头

常用的css样式-使用伪类制作箭头

1.css中使用伪类制作箭头(效果如下)

	div{
	 position: relative;
	}
	div::after{
	  content: "";
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  display: block;
	  background: #F2F1EF;
	  width: 100%;
	  height: 20upx;
	}

2.css中使用伪类制作箭头(效果如下)

html代码

css代码

.c-main{ 
	position:relative;//必须要写! 
	width:400px; 
	height:400px; 
	border：1px solid #000; 
} 
/使用伪类制作箭头/ 
.c-main:before{ 
	content: ”; 
	border-top: 9px solid transparent;/方框上部分背景颜色为透明/ 
	border-bottom: 9px solid transparent;/方框下部分背景为透明/ 
	border-right: 9px solid #000;/箭头背景颜色/ 
	position: absolute;/绝对定位1/ 
	top: 25px;/距离顶部位置偏移量2/ 
	left: -9px;/距离左边位置偏移量3/ /123都是控制显示位置的/ 
} 
.c-main:after{ 
	content: ”; 
	border-top: 7px solid transparent; 
	border-bottom: 7px solid transparent; 
	border-right: 7px solid #fff;/箭头背景颜色，覆盖前面的#eee颜色，使其颜色与整体颜色一致/ 
	position: absolute; 
	top: 27px; 
	left: -7px;//这里的top:27px，left:-7px是为了遮盖住.c-main:before生成的箭头，使箭头边框呈现颜色 
}