Html
    Css
    Js

    
                        
* {
	padding:0;
	margin:0;
	list-style:none;
	border:0;
}
/*第一种方法*/
	.box {
	width:200px;
	height:100px;
	margin:20px auto;
	position:relative;
}
.boxcontent {
	width:198px;
	height:98px;
	border:1px solid #ccc;
}
.border-arrow {
	width:0;
	height:0;
	font-size:0;
	line-height:0;
	position:absolute;
	left:10px;
	top:-16px;
}
.border-arrow em,.border-arrow ins {
	width:0;
	height:0;
	display:block;
	position:absolute;
	border:8px solid transparent;
	border-style:dashed dashed solid dashed;
}
.border-arrow em {
	border-bottom-color:#ccc;
}
.border-arrow ins {
	border-bottom-color:#fff;
	top:1px;
}
/*第二种方法*/
	.second-arrow:before,.second-arrow:after {
	width:0;
	height:0;
	display:block;
	position:absolute;
	content:"";
	border:solid transparent;
	line-height:0;
}
.second-arrow:before {
	left:10px;
	top:-16px;
	border-bottom:solid #ccc;
	border-width:8px;
}
.second-arrow:after {
	left:9px;
	top:-15px;
	border-bottom:solid #fff;
	border-width:9px;
}
/*第三种方法*/
	.third-arrow,.third-arrow-inner {
	width:0;
	height:0;
	position:absolute;
	border:8px solid transparent;
}
.third-arrow {
	left:10px;
	top:-16px;
	border-bottom:8px solid #ccc;
}
.third-arrow-inner {
	left:-8px;
	top:-7px;
	border-bottom:8px solid #fff;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

三种css方法实现三角效果

0