整合營銷服務商

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

          免費咨詢熱線:

          用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下無效。

          實現樣式代碼:


          主站蜘蛛池模板: 爱爱帝国亚洲一区二区三区| 交换国产精品视频一区| 中文字幕亚洲综合精品一区| 亚洲av无码片区一区二区三区| 视频一区二区精品的福利| 精品人伦一区二区三区潘金莲| 亚州国产AV一区二区三区伊在| 无码中文字幕人妻在线一区二区三区 | 国产精品盗摄一区二区在线| 精品一区二区三区在线观看视频 | 99热门精品一区二区三区无码 | 无码一区二区三区老色鬼| 亚洲国产一区二区视频网站| 国产一区在线电影| 日韩免费视频一区| 无码一区18禁3D| 久久精品无码一区二区三区不卡| 亚洲蜜芽在线精品一区| 精品无码一区二区三区爱欲九九| 亚洲一区精品中文字幕| 无码精品视频一区二区三区| 久久99国产精一区二区三区| 精品一区二区三区免费| 国产AV午夜精品一区二区三区| 国产午夜精品一区二区三区漫画| 国产一区二区三区免费| 国产AV一区二区三区无码野战| 亚洲一区二区影院| 无码av免费毛片一区二区| 国模无码一区二区三区| 在线视频亚洲一区| 国产精品亚洲高清一区二区| 日本亚洲国产一区二区三区| 久久精品道一区二区三区| 日韩AV无码久久一区二区| 亚洲日韩中文字幕一区| 免费观看日本污污ww网站一区| 久久精品国产一区二区 | 国产在线乱子伦一区二区| 国产一区二区在线观看| 国产99精品一区二区三区免费|