html实现三角,三种css方法实现三角效果

* {

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;

}