用css3繪製你須要的幾何圖形

一、圓形

示例:　　　　　　　　　

思路：給任何正方形元素設置一個足夠大的 border-radius ，就能夠把它變成一個圓形.代碼以下：

html:

 <div class="size example1"></div>

css:

.size{
    width:200px;
    height: 200px;
    background: #8BC34A;
}
.example1{
    border-radius:100px;
}

 二、自適應橢圓

 思路：border-radius 這個屬性還有另一個不爲人知的真相，它不只能夠接受長度值，還能夠接受百分比值。這個百分比值會基於元素的尺寸進行解析.這意味着相同的百分比可能會計算出不一樣的水平和垂直半徑。代碼以下：

html:

<div class="example3"></div>

css:

.example3{
    width:200px;
    height: 150px;
    border-radius:50%;
    background: #8BC34A;
}

三、自適應的半橢圓:沿橫軸劈開的半橢圓

思路：border-radius 的語法比咱們想像中靈活得多。你可能會驚訝地發現 border-radius 原來是一個簡寫屬性。第一種方法就是使用它所對應的各個展開式屬性：

• „ border-top-left-radius
• „ border-top-right-radius
• „ border-bottom-right-radius
• „ border-bottom-left-radius

咱們甚至能夠爲全部四個角提供徹底不一樣的水平和垂直半徑，方法是在斜槓前指定 1~4 個值，在斜槓後指定另外 1~4 個值。舉例來講，當 border-radius 的值爲10px / 5px 20px 時，其效果至關於 10px 10px 10px 10px / 5px 20px 5px 20px 。

爲 border-radius 屬性分別指定四、三、二、1 個由空格分隔的值時，這些值是以這樣的規律分配到四個角上的（請注意，對橢圓半徑來講，斜槓前和斜槓後最多能夠各有四個參數，這兩組值是以一樣的方法分配到各個角的）

代碼以下：自適應的半橢圓:沿橫軸劈開的半橢圓

html:

<div class="example4"></div>

css:

.example4{
    width:200px;
    height: 150px;
    border-radius: 50% / 100% 100% 0 0;
    background: #8BC34A;
}

四、自適應的半橢圓:沿縱軸劈開的半橢圓

思路：自適應的半橢圓:沿縱軸劈開的半橢圓

代碼以下：

html:

<div class="example5"></div>

css:

.example5{
    width:200px;
    height: 150px;
    border-radius: 100% 0 0 100% / 50%;
    background: #8BC34A;
}

五、四分之一橢圓

思路：其中一個角的水平和垂直半徑值都須要是100%，而其餘三個角都不能設爲圓角。

 

代碼以下：

html:

<div class="example6"></div>

css:

.example6{
    width:160px;
    height: 100px;
    border-radius: 100% 0 0 0;
    background: #8BC34A;
}

 六、用橢圓繪製opera瀏覽器的logo

思路：繪製opera瀏覽器的logo,分析起來不難，就只有兩個圖層，一個是最底部的橢圓，一個是最上面那層的橢圓。先肯定一下最底層的橢圓寬高，量了一下，水平寬度爲258px，垂直高度爲275px，由於其是一個對稱的橢圓，沒有傾斜度，故4個角均爲水平半徑爲258px，垂直半徑爲275px的4個相等橢圓，用一樣的辦法肯定最裏面的橢圓的半徑，所以，四個角均爲水平半徑120px，垂直半徑爲229px的橢圓，代碼以下：

html:

<div class="opera">
        <div class="opera-top"></div> 
</div>

css:

.opera{
    width:258px;
    height: 275px;
    background: #F22629;
    border-radius:258px 258px 258px 258px /275px 275px 275px 275px;
    position: relative;
}
.opera-top{
    width: 112px;
    height: 231px;
    background: #FFFFFF;
    border-radius: 112px 112px 112px 112px/231px 231px 231px 231px;
    position: absolute;
    left: 50%;
    right: 50%;
    top: 50%;
    bottom: 50%;
    margin-left: -56px;
    margin-top: -115px;
}

 七、平行四邊形

思路：僞元素方案:是把全部樣式（背景、邊框等）應用到僞元素上，而後再對 僞元素進行變形。由於咱們的內容並非包含在僞元素裏的，因此內容並不會受到變形的影響。代碼以下：

html:

<div class="button">transform:skew()</div>

css:

.button {
    width:200px;
    height: 100px;
    position: relative;
    left: 100px;
    line-height: 100px;
    text-align: center;
    font-weight: bolder;
}

.button::before {
   content: ''; /* 用僞元素來生成一個矩形 */
　　position: absolute;
　　top: 0; right: 0; bottom: 0; left: 0;
　　z-index: -1;
　　transform: skew(45deg);
　　background: #8BC34A;
}

技巧總結：這個技巧不只對 skew() 變形來講頗有用，還適用於其餘任何變形樣式，當咱們想變形一個元素而不想變形它的內容時就能夠用到它。

八、菱形

思路：咱們把這個技巧針對 rotate() 變形樣式稍稍調整一下，再用到一個正方形元素上，就能夠很容易地獲得一個菱形。代碼以下：

html:

 <div class="example1">transform:rotate()</div>

css:

.example1 {
    width:140px;
    height: 140px;
    position: relative;
    left: 100px;
    line-height: 100px;
    text-align: center;
    font-weight: bolder;
}
.example1::before {
    content: ''; 
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    transform: rotate(45deg);
    background: #8BC34A;
}

技巧總結：這個技巧的關鍵在於，咱們利用僞元素以及定位屬性產生了一個方塊， 而後對僞元素設置樣式，並將其放置在其宿主元素的下層。這種思路一樣可 以運用在其餘場景中，從而獲得各類各樣的效果。

九、菱形圖片

思路：基於變形的方案，
咱們想讓圖片的寬度與容器的對角線相等，而不是與邊長相等。須要用到勾股定理，這個定理告訴咱們，一個正方形的對角線長度等於它的邊長乘以根號2，約等於1.414 213 562  。所以，把 max-width 的值設置爲根號2乘以100%約等於 414.421 356 2% 是很合理的，或者把這個值向上取整爲 142% ，由於咱們不但願由於計算的舍入問題致使圖片在實際顯示時稍小（但稍大是沒問題的，反正咱們都是在裁切圖片嘛）

代碼以下：

html:

 <div class="picture">
    <img src="./imgs/7.jpg">
 </div>

css:

.picture {
    width: 200px;
    transform: rotate(45deg);
    overflow: hidden;
    margin: 50px;
}
.picture img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
    z-index: -1;
    position: relative;
}

技巧總結：咱們但願圖片的尺寸屬性保留 100% 這個值，這樣當瀏覽器不支持變 形樣式時仍然能夠獲得一個合理的佈局。 „ 經過 scale() 變形樣式來縮放圖片時，是以它的中心點進行縮放的 （除非咱們額外指定了 transform-origin 樣式） 。經過 width 屬性 來放大圖片時，只會以它的左上角爲原點進行縮放，從而迫使咱們 動用額外的負外邊距來把圖片的位置調整回來.

十、切角效果

思路：基於background:linear-gradient()的方案:把四個角都作出切角效果了。你須要四層漸變圖案，代碼如 下所示：

html:

<div class="example2">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>

css:

.example2{
    background: #8BC34A;
    background: linear-gradient(135deg, transparent 15px, #8BC34A 0) top left,
                linear-gradient(-135deg, transparent 15px, #8BC34A 0) top right,
                linear-gradient(-45deg, transparent 15px, #8BC34A 0) bottom right,
                linear-gradient(45deg, transparent 15px, #8BC34A 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    
    padding: 1em 1.2em;
    max-width: 12em;
    line-height: 1.5em;
}

十一、弧形切角

思路：上述漸變技巧還有一個變種，能夠用來建立弧形切角（不少人也把這種 效果稱爲「內凹圓角」 ，由於它看起來就像是圓角的反向版本） 。惟一的區別 在於，咱們會用徑向漸變來替代上述線性漸變，代碼以下：

html:

<div class="example3">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>

css:

.example3{
    background: #8BC34A;
    background: radial-gradient(circle at top left, transparent 15px, #8BC34A 0) top left,
                radial-gradient(circle at top right, transparent 15px, #8BC34A 0) top right,
                radial-gradient(circle at bottom right, transparent 15px, #8BC34A 0) bottom right,
                radial-gradient(circle at bottom left, transparent 15px, #8BC34A 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    
    padding: 1em 1.2em;
    max-width: 12em;
}

 十二、簡單的餅圖

思路：基於 transform 的解決方案：咱們如今能夠經過一個 rotate() 變形屬性來讓這個僞元素轉起來。 若是咱們要顯示出 20% 的比率，咱們能夠指定旋轉的值爲 72deg （0.2 × 360 = 72） ，寫成 .2turn 會更加直觀一些。你還能夠看到其 他一些旋轉值的狀況。代碼以下：

html:

 <div class="pie"></div>

css：

.pie{
    width:140px;
    height: 140px;
    background: #8BC34A;
    border-radius: 50%;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie::before{
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    transform: rotate(.1turn);/*10%*/
    transform: rotate(.2turn);/*20%*/
    transform: rotate(.3turn);/*30%*/
}

提示：在參數中規定角度。turn是圈，1turn = 360deg；另外還有弧度rad，2nrad = 1turn = 360deg。如，transform:rotate(2turn); //旋轉兩圈

此方法顯示 0 到 50% 的比率時運做良好，但若是咱們嘗試顯示 60% 的比率時（好比指定旋轉值爲 .6turn 時），會出現問題。解決方法：使 用上述技巧的一個反向版原本實現這個範圍內的比率：設置一個棕色的僞 元素，讓它在 0 至 .5turn 的範圍內旋轉。所以，要獲得一個 60% 比率的餅 圖，僞元素的代碼多是這樣的：

html:

<div class="pie2"></div>

css:

.pie2{
    width:140px;
    height: 140px;
    background: #8BC34A;
    border-radius: 50%;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie2::before{
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background: #655;/*當範圍大於50%時,須要改變僞元素的背景顏色爲#655;*/
    transform-origin: left;
    transform: rotate(.1turn);
}

用 CSS 動畫來實現一個餅圖從 0 變化到 100% 的動畫，從而獲得一個炫酷的進度指示器：

代碼以下：

html:

<div class="pie3"></div>

css:

.pie3 {
    width:140px;
    height: 140px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right, transparent 50%, currentColor 0);
    color: #655;
}

.pie3::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    animation: spin 3s linear infinite, bg 6s step-end infinite;
}

@keyframes spin {
    to { transform: rotate(.5turn); }
}
@keyframes bg {
    50% { background: currentColor; }
}