如何在css中繪制特殊圖形？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)是少有的成都網站建設、成都網站設計、營銷型企業(yè)網站、小程序開發(fā)、手機APP,開發(fā)、制作、設計、賣鏈接、推廣優(yōu)化一站式服務網絡公司,于2013年成立,堅持透明化,價格低,無套路經營理念。讓網頁驚喜每一位訪客多年來深受用戶好評

一、三角形

border邊框設置

代碼：

width: 300px;
height: 300px;
background: red;
border: 40px solid black;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: pink;
border-top-color: #008800;

花特殊圖形的時候需要將寬高設置成0

效果：

代碼：

width: 0;
height: 0;
background: transparent;
border: 40px solid black;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: pink;
border-top-color: #008800;

1、等腰三角形：將其他的邊的border設置成透明

代碼：

width:0;
height: 0;
background: transparent;
border: 40px solid black;
border-left-color: transparent;
border-bottom-color: yellow;
border-right-color: transparent;
border-top-color: transparent;

2、直角三角形

代碼：先寫出個完整的div,再使用border-***-width：0；來截取三角形

border-top-width/border-bottom-width:0=》就是在中間橫著劈開一道，保留上邊或者下邊

border-left-width/border-right-width:0=》就是在中間豎著劈開一道，保留左邊或者右邊

.rightAngle{
    width: 0;
    height: 0;
    background: transparent;
    border: 40px solid black;
    border-left-color: blue;
    border-bottom-color: yellow;
    border-right-color: pink;
    border-top-color: #008800;
    border-top-width: 0;
    border-left-width: 0;
    border-right-color: transparent;
}

3、梯形

彩帶圖形：

代碼：

width: 300px;
height: 0;
background: transparent;
border: 40px solid #008800;
border-left-color: transparent;
border-bottom-color: yellow;
border-right-color: transparent;
border-top-color: #008800;

梯形：

代碼：將上面彩帶圖形的寬度減少，然后將上面的梯形設置為透明

width: 100px;
height: 0;
background: transparent;
border: 40px solid #008800;
border-left-color: transparent;
border-bottom-color: #008800;
border-right-color: transparent;
border-top-color: transparent;

總結：通過設置長度和高度，以及設置border的透明度來拼湊成想要的圖形4、圓形

4、圖形：

代碼： 使用border-radius:50%;

.circle{
    width: 100px;
    height: 100px;
    border: 0;
    border-radius: 50%;
    background-color: orange;
}

5、橢圓

圖形：

代碼：

.ellipse{
    width: 200px;
    height: 120px;
    background-color: orange;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

總結：

一個display：block的元素設定寬高之后表現(xiàn)為矩形。通過設定border-radius可以得到圓角矩形，圓形和橢圓形。

在使用border-radius時，有幾點可能需要注意一下：

• border-radius，可以分別對4個角進行設定。 例如上圖：border-top-left-radius: apx bpx;

• border-xxx-xxx-radius的兩個值分別代表著橢圓長軸和短軸長度的一半，通常簡寫的時候例如border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明長軸和短軸的長度均為20px，也就是半徑為10px的圓形（圓角部分）。

• 當使用百分比數(shù)值時，a 相對于width， b相對于height 6、特殊圖形

（1）斜邊三角形

圖形：

代碼：先畫個等邊三角形，然后再轉換角度

.beveledTriangle{
    margin: 50px;
    width: 0;
    height: 0;
    border: 20px solid #2b81af;
    border-top-width: 40px;
    border-top-color:transparent;
    border-bottom-width: 40px;
    border-bottom-color: transparent;
    border-left-width: 0;
    border-right-color: #008800;
    border-right-width: 25px;
    transform-origin:center center;
    transform:rotateY(-180deg) rotate(-44deg)  ;
}

（2）繪制一條“小尾巴”

圖形：

代碼：

.tail{
    margin: 50px;
    width: 100px;
    height: 70px;
    border-top-right-radius: 70px 70px;
    border-right:6px solid #000000;
}

總結：當對一個角應用圓角樣式， 如果這個角相鄰的兩個boeder一個有定義而一個無定義，那么繪制的結果就是有粗到細的“小尾巴了”

7、繪制QQ圖案（取自AlloyTeam案例）

圖形：

代碼：