使用css3繪制出各種幾何圖形

博客園 發(fā)布時間：2016-08-17 16:46:34 作者：流浪的詩人

我要評論

這篇文章通過實例代碼向大家演示了在Css3中如何繪制各種大家所需要的幾何圖形，對大家日常使用還是很有幫助，有需要的可以參考學習。

1、圓形

示例:　　　　　　　　　
思路：給任何正方形元素設(shè)置一個足夠大的 border-radius ，就可以把它變成一個圓形.代碼如下：

html:

復制代碼

代碼如下:

css:

復制代碼

代碼如下:

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

2、自適應橢圓

思路：border-radius 這個屬性還有另外一個鮮為人知的真相，它不僅可以接受長度值，還可以接受百分比值。這個百分比值會基于元素的尺寸進行解析.這意味著相同的百分比可能會計算出不同的水平和垂直半徑。

代碼如下：

html:

復制代碼

代碼如下:

css:

復制代碼

代碼如下:

.example3{
width:200px;
height: 150px;
border-radius:50%;
background: #8BC34A;
}
[/code}</p> <p><strong><font color="#ff0000">3、自適應的半橢圓:沿橫軸劈開的半橢圓</font></strong></p> <p><img border="0" alt="" src="http://img.jbzj.com/file_images/article/201608/2016081516050814.jpg" />
思路：border-radius 的語法比我們想像中靈活得多。你可能會驚訝地發(fā)現(xiàn) border-radius 原來是一個簡寫屬性。</p> <p>第一種方法就是使用它所對應的各個展開式屬性：
[code]
„ 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 屬性分別指定4、3、2、1 個由空格分隔的值時，這些值是以這樣的規(guī)律分配到四個角上的（請注意，對橢圓半徑來說，斜杠前和斜杠后最多可以各有四個參數(shù)，這兩組值是以同樣的方法分配到各個角的）

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

html:

復制代碼

代碼如下:

css:

復制代碼

代碼如下:

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

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

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

代碼如下：
html:

復制代碼

代碼如下:

css:

復制代碼

代碼如下:

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

5、四分之一橢圓

思路：其中一個角的水平和垂直半徑值都需要是100%，而其他三個角都不能設(shè)為圓角。

代碼如下：
html:

復制代碼

代碼如下:

css:

復制代碼

代碼如下:

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

6、用橢圓繪制opera瀏覽器的logo

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

html:

復制代碼

代碼如下:

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;
}

7、平行四邊形

思路：偽元素方案:是把所有樣式（背景、邊框等）應用到偽元素上，然后再對偽元素進行變形。因為我們的內(nèi)容并不是包含在偽元素里的，所以內(nèi)容并不會受到變形的影響。代碼如下：

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;
}

技巧總結(jié)：這個技巧不僅對 skew() 變形來說很有用，還適用于其他任何變形樣式，當我們想變形一個元素而不想變形它的內(nèi)容時就可以用到它。

8、菱形

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

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;
}

技巧總結(jié)：這個技巧的關(guān)鍵在于，我們利用偽元素以及定位屬性產(chǎn)生了一個方塊，然后對偽元素設(shè)置樣式，并將其放置在其宿主元素的下層。這種思路同樣可以運用在其他場景中，從而得到各種各樣的效果。

9、菱形圖片

思路：基于變形的方案，
我們想讓圖片的寬度與容器的對角線相等，而不是與邊長相等。需要用到勾股定理，這個定理告訴我們，一個正方形的對角線長度等于它的邊長乘以根號2，約等于1.414 213 562 。因此，把 max-width 的值設(shè)置為根號2乘以100%約等于 414.421 356 2% 是很合理的，或者把這個值向上取整為 142% ，因為我們不希望因為計算的舍入問題導致圖片在實際顯示時稍?。ǖ源笫菦]問題的，反正我們都是在裁切圖片嘛）

代碼如下：
html:

復制代碼

代碼如下:

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;
}

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

10、切角效果

思路：基于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;
}

11、弧形切角

思路：上述漸變技巧還有一個變種，可以用來創(chuàng)建弧形切角（很多人也把這種效果稱為“內(nèi)凹圓角” ，因為它看起來就像是圓角的反向版本）。唯一的區(qū)別在于，我們會用徑向漸變來替代上述線性漸變，代碼如下：

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;
}

12、簡單的餅圖

思路：基于 transform 的解決方案：我們現(xiàn)在可以通過一個 rotate() 變形屬性來讓這個偽元素轉(zhuǎn)起來。如果我們要顯示出 20% 的比率，我們可以指定旋轉(zhuǎn)的值為 72deg （0.2 × 360 = 72），寫成 .2turn 會更加直觀一些。你還可以看到其他一些旋轉(zhuǎn)值的情況。

代碼如下：
html:

復制代碼

代碼如下:

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%*/
}

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

此方法顯示 0 到 50% 的比率時運作良好，但如果我們嘗試顯示 60% 的比率時（比如指定旋轉(zhuǎn)值為 .6turn 時），會出現(xiàn)問題。解決方法：使用上述技巧的一個反向版本來實現(xiàn)這個范圍內(nèi)的比率：設(shè)置一個棕色的偽元素，讓它在 0 至 .5turn 的范圍內(nèi)旋轉(zhuǎn)。因此，要得到一個 60% 比率的餅圖，

偽元素的代碼可能是這樣的：
html:

復制代碼

代碼如下:

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 動畫來實現(xiàn)一個餅圖從 0 變化到 100% 的動畫，從而得到一個炫酷的進度指示器：

代碼如下：
html:

復制代碼

代碼如下:

css:

復制代碼

代碼如下:

.pie3 {
width:140px;
height: 140px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, currentColor 0);
color: #655;
}</p> <p>.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;
}</p> <p>@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes bg {
50% { background: currentColor; }
}

總結(jié)
以上就是本文的全部內(nèi)容，希望對大家學習Css3能有所幫助。