CSS實現DIV三角形

標籤：style   blog   http   color   io   os   ar   sp   div   

本文內容收集來自網路

#triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid red;}

#triangle-down {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-top: 100px solid red;}

#triangle-left {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-right: 100px solid red;    border-bottom: 50px solid transparent;}

#triangle-right {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-left: 100px solid red;    border-bottom: 50px solid transparent;}

#triangle-topleft {    width: 0;    height: 0;    border-top: 100px solid red;    border-right: 100px solid transparent;}

#triangle-topright {    width: 0;    height: 0;    border-top: 100px solid red;    border-left: 100px solid transparent; }

#triangle-bottomleft {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-right: 100px solid transparent;}

#triangle-bottomright {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-left: 100px solid transparent;}

<!-- 外框 --><div class="mod-container">    <!-- 小三角部分 -->    <div class="mod-triangle">        <div class="t-border"></div>        <div class="t-inset"></div>    </div></div>

/*外框容器*/.mod-container {    width:100px;    height:60px;    border:1px solid #000;    margin:20px;    background:#fff;}/*小三角部分*/.mod-triangle {    display:block;    position:relative;    left:-23px;    top:18px;    z-index:20;}.mod-triangle .t-border,.mod-triangle .t-inset{    left:0px;    top:0px;    width:0;    height:0;    font-size:0;    overflow:hidden;    position:absolute;    border-width:12px;    /*可在此處更改小三角方向：上-右-下-左（solid的位置）*/    border-style:dashed solid dashed dashed;}/*小三角的邊框，如果不需要，可將顏色值改變*/.mod-triangle .t-border{    border-color:transparent #000 transparent transparent;    left:-1px;}.mod-triangle .t-inset{    border-color: transparent #fff transparent transparent;}

 

CSS實現DIV三角形