CSS border making triangles

Border border

The upper triangle is only the above border have color, the rest of the border is tranparents, the lower triangle only the border below the color, the rest of the border is tranparents, left Triangle only the border of the right side of the color, The rest of the border is tranparents, the right triangle only the border with color, the rest of the border is tranparents,

Code

/*** Triangle ***/
/*** outer ***/
#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;
}
/*** Small Triangle ***/
#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 code

<div id= ' imgmouseover ' ><i class= ' Sanjiao ' ></i> <p id= ' showcontent ' ></p></div>

CSS border making triangles