css绘制三角形

来源：互联网发布：淘宝生意怎么做大做强编辑：程序博客网时间：2024/06/08 13:42

<!-- 向上的三角形 --><div class="triangle_border_up"></div>                                                      <!-- 向下的三角形 --><div class="triangle_border_down"></div>                                                      <!-- 向左的三角形 --><div class="triangle_border_left"></div>                                                      <!-- 向右的三角形 --><div class="triangle_border_right"></div>

/*向上*/.triangle_border_up{    width:0;    height:0;    border-width:0 30px 30px;    border-style:solid;    border-color:transparent transparent #333;/*透明 透明  灰*/}/*向下*/.triangle_border_down{    width:0;    height:0;    border-width:30px 30px 0;    border-style:solid;    border-color:#333 transparent transparent;/*灰 透明 透明 */}/*向左*/.triangle_border_left{    width:0;    height:0;    border-width:30px 30px 30px 0;    border-style:solid;    border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */}/*向右*/.triangle_border_right{    width:0;    height:0;    border-width:30px 0 30px 30px;    border-style:solid;    border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/}

气泡框

<!-- 气泡框 --><div class="tip-up"><span><em></em></span>纯CSS写带边框的三角形</div>

.tip-up{    width:100px;    background:#fc0;     padding:10px 20px;     color:#333;      border-radius:4px;    position:relative;     top:30px;     left:30px;    border:1px solid #333;}.tip-up span{    display:block;     width:0;     height:0;     border-width:0 10px 10px;     border-style:solid;     border-color:transparent transparent #333;     position:absolute;     top:-10px;     left:50%;/* 三角形居中显示 */    margin-left:-10px;/* 三角形居中显示 */}.tip-up em{    display:block;     width:0;     height:0;     border-width:0 10px 10px;     border-style:solid;     border-color:transparent transparent #fc0;     position:absolute;     top:1px;     left:-10px;}

阅读全文

1 0