css border 制作三角形

border 边框

上三角 是只有上面的border 有颜色，其余的边框都是tranparents,下三角只有下面的border 有颜色,其余的边框都是tranparents,左三角只有左面的border 有颜色,其余的边框都是tranparents,右三角只有右面的border 有颜色,其余的边框都是tranparents,

代码

/***三角***/
/***外层***/
#imgMouseOver{
position: absolute;
top:48px;
left:-42px;
width:103px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #dfdfdf;
background: #fff;
z-index:999;
box-shadow: 2px 2px 2px #ddd;
padding:4px 2px;
display: none;
}
/***小三角***/
#imgMouseOver .sanjiao{
position: absolute;
top:-20px;
left:50%;
width:0px;
margin-left:-3px;
height:0px;
border-width:10px 6px;
border-style:solid;
border-color:transparent transparent #dfdfdf transparent;}
#showContent{
height:30px;
line-height:30px;
text-align:center;
}

html 代码

<div id='imgMouseOver'><i class='sanjiao'></i> <p id='showContent'></p></div>