css border 製作三角形

標籤：parent   ado   order   use   center   webkit   seo   代碼   ext   

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>

css border 製作三角形