CSS3實現三角形

標籤：ges   blog   mic   pos   作用   bottom   ima   pad   order   

<div class="arrow-up">     <!--向上的三角--></div><div class="arrow-down">    <!--向下的三角--></div><div class="arrow-left">    <!--向左的三角--></div><div class="arrow-right">    <!--向右的三角--></div>

下面用CSS3分別實現向上、下、左、右的三角形

/*箭頭向上*/.arrow-up {    width:0;     height:0;     border-left:30px solid transparent;    border-right:30px solid transparent;    border-bottom:30px solid #fff;}     /*箭頭向下*/.arrow-down {    width:0;     height:0;     border-left:20px solid transparent;    border-right:20px solid transparent;    border-top:20px solid #0066cc;}

/*箭頭向左*/.arrow-left {    width:0;     height:0;     border-top:30px solid transparent;    border-bottom:30px solid transparent;     border-right:30px solid yellow; }   /*箭頭向右*/.arrow-right {    width:0;     height:0;     border-top:50px solid transparent;    border-bottom: 50px solid transparent;    border-left: 50px solid green;}

好了原理我們瞭解了，那麼我們就實戰一下吧，來實現帶小三角形的div框。

 

首先，寫出html代碼：

<div class="entry">    <div class="entry-trangle"><!--本Div只來實現三角形，無其他作用--></div>    hello，我出生了<br/>    hello，我出生了<br/>    hello，我出生了<br/>    hello，我出生了<br/></div>

掛載有類"entry-trangle"的div只用來實現小三角形。對這個div用css3的transparent實現三角形，然後絕對位置、設定z-index:-1;、margin-left:-19px;，看下面css代碼：

<style type="text/css">    *{margin:0;padding:0;}    body{        background:#666;        font:14px/20px "Microsoft YaHei";    }    .entry{        margin:0 auto;        margin-top:20px;        width:280px;                    background:#fff;        padding:10px;           /*設定圓角*/        -webkit-border-radius:5px;        -moz-border-radius:5px;        border-radius:5px;    }    .entry-trangle{        position:absolute;        margin-left:-19px;        width:0;        height:0;        border-top:10px solid transparent;        border-bottom:10px solid transparent;        border-right:10px solid #fff;        z-index:-1;    }</style>

border-radius:5px;用來實現圓角；絕對位置、z-index:-1;的目的都是使控制小三角形的div在最底層，不影響父級div裡面的內容布局。

 

原文連結：http://blog.aizhet.com/web/4382.html

CSS3實現三角形