整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          用css如何實現三角形

          實際編程中我們經常會遇到下拉菜單的下三角和一些特殊的圖形,那么這些如何用css來實現呢?

          例1

          例2

          例3

          原理:

          仔細想想,原理非常簡單,利用CSS的border以及它的屬性值transparent來實現三角形,其中最主要的是要明白由于div的高度跟寬度都為0,margin,padding也為0,所以元素框的大小就是他的border的疊加,由于相鄰border會重疊,故存在內容寬高時其實任意一邊存在的border都是梯形的,當div內容寬高為0時,border就表現為三角形,將四個border的顏色設置為transparent表示邊框透明,而將右邊框顏色再設置為紅色就發現三角形出現了,其實這個三角形是你設置顏色的邊框。

          <style>
              div {
                  width: 0;
                  height: 0;
                  border-top: 40px solid transparent;
                  border-left: 40px solid transparent;
                  border-right: 40px solid transparent;
                  border-bottom: 40px solid #ff0000;
              }
              </style>
          </head>
          <body>
            <div></div>
          </body>

          如果想要不同方向的三角形,只需要改變所需的邊框顏色,另外三條邊改為transparent(透明)。那么我們就能很簡單地實現例1和例3的效果。

          一些不規則的三角形只需要改變邊框的寬度就可以得到不同形狀的三角形

          <style>
                  div{
                      width: 0px;
                      height: 0px;
                      border-width: 0px 0px 200px 100px;
                      border-style: solid;
                      border-bottom-color:green ;
                      border-left-color:transparent;
                  }
          </style>
          </head>
          <body>
            <div></div>
          </body>

          展示結果:

          端開發經常會遇到三角形的裝飾,今天我們來用css實現。還是一樣先上全代碼,在逐步解析。

          全代碼展示

          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <meta http-equiv="X-UA-Compatible" content="IE=edge" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <title>Document</title>
            </head>
            <style>
              .title {
                position: relative;
                padding-left: 16px;
              }
              .title::before {
                content: "";
                position: absolute;
                border-width: 8px;
                border-style: solid;
                border-color: transparent transparent transparent red;
                top: 50%;
                left: 0;
                margin-top: -8px;
              }
            </style>
            <body>
              <div class="title">css實現三角形</div>
            </body>
          </html>

          效果展示


          最終效果+元素查看

          代碼解析

          1.用div寫一個標題

           <div class="title">css實現三角形</div>

          2.標題樣式。

          設置相對定位,并設置內邊距,給三角形留下空間

          .title {
                position: relative;
                padding-left: 16px;
              }

          3.三角形樣式

          這里用到了 ::before 偽類元素,簡單解釋下,他會在元素(本代碼中為“title”)內容前插入新的內容(本代碼content中的內容為空)。

          重點:不設置元素的寬高,只設置4邊的寬度和顏色結果如下圖

          給元素4邊都設置顏色和寬度

          // 4邊都設置顏色   
          .title::before {
                content: "";
                position: absolute;
                border-width: 8px;
                border-style: solid;
                border-color: blue green yellow red;
                top: 50%;
                left: 0;
                margin-top: -8px;
              }

          通過讓其他3邊顏色透明就能實現三角形效果,給需要顯示的三角形的邊線設置顏色。

          (tip:三角形的總高是上下邊線寬度之和,所以偏移一半高度居中)

          做網頁很多時候我們需要使用一個類似下拉菜單的三角形圖標,雖然用圖片和其他方法也可以實現,但是修改起來不方便,所以一般使用純CSS的方法來實現。

          1.利用 border 屬性實現三角形

          這個原理很簡單,我們先看下面的圖,這是一個邊框為 20px 的 div,看他的邊框,是個梯形,變化會從這里開始。

          把它的寬和高都設為 0,效果如下圖:

          四個邊框都變成三角形了,現在我再把它的左右和下邊框的顏色都設成透明或和背景顏色相同的顏色,就出來我們想要的三角形了。

          注意:IE6下把邊框設置成 transparent 時會出現黑影,并不會透明,把 border-style 設置成 dashed 可以解決。

          這樣,一個三角形就出來了!

          2、利用 CSS3 transfrom 旋轉 45 度實現三角形

          先創建一個帶 border 的 div ,設置好背景色和相鄰的兩個邊框的顏色,然后選擇 45 度。

          注:IE6下無效。

          實現樣式代碼:


          主站蜘蛛池模板: 91精品一区国产高清在线| 一区二区乱子伦在线播放| 亚洲综合无码AV一区二区| 蜜桃视频一区二区三区在线观看| 国产主播一区二区三区| 亚洲av无码成人影院一区| 久久久国产精品亚洲一区| 无码精品人妻一区二区三区人妻斩| 一区二区三区免费精品视频 | 国产高清在线精品一区二区| 亚洲性无码一区二区三区| 亚洲美女视频一区二区三区| 亚洲AV午夜福利精品一区二区| 久久精品一区二区影院| 久久久国产一区二区三区| 精品国产一区二区三区在线观看| 亚洲国产精品一区二区九九| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 色欲综合一区二区三区| 高清一区二区三区日本久| 在线精品亚洲一区二区三区| 精品一区二区三区在线观看| 久久精品国产第一区二区| 色狠狠色噜噜Av天堂一区| 高清一区二区三区日本久| 91久久精品无码一区二区毛片| 精品不卡一区二区| 国产品无码一区二区三区在线| 夜夜高潮夜夜爽夜夜爱爱一区| 美日韩一区二区三区| 一区二区精品在线观看| 中文字幕亚洲一区| 精品无码一区二区三区爱欲| 国产精品综合AV一区二区国产馆| 亚洲综合激情五月色一区| 日韩在线视频一区二区三区 | 久久毛片免费看一区二区三区| 少妇人妻偷人精品一区二区| 男女久久久国产一区二区三区| 亚洲大尺度无码无码专线一区| 国产精品盗摄一区二区在线|