css 畫三角形

標籤：

<div class="tips"></div>

.tips{

position: relative;

border: 1px solid #aaa;

}

.tips:before{

content: "";
position: absolute;
border-style: solid;
/* reduce the damage in FF3.0 */
display: block;
width: 0;
top: -7px; /* value = - border-top-width - border-bottom-width */
left: 28px; /* controls horizontal position */
bottom: auto;
border-width: 0 9px 7px; /* vary these values to change the angle of the vertex */
border-color: #666 transparent;

}

.tips:after{

content: "";
position: absolute;
border-style: solid;
/* reduce the damage in FF3.0 */
display: block;
width: 0;
top: -5px; /* value = - border-top-width - border-bottom-width */
left: 30px; /* controls horizontal position */
bottom: auto;
border-width: 0 7px 5px; /* vary these values to change the angle of the vertex */
border-color: #fff transparent;

}

css 畫三角形