相信很多資深網頁設計師&前端設計師，都經過web1.0~ 到現在web3.0的演變。從大量的運運圖素在網頁上，轉變現在希望所有圖像式的呈現最小化。
那麼CSS3將是扮演一個非常重要的工具，很感謝網路有達人整理了如何用CSS3來呈現各式各樣的幾何圖象，以下為圖示及CSS&HTML 的網頁tag 供各位參考。
1、圓形
示例:
思路：給任何正方形元素設置一個足夠大的border-radius ，就可以把它變成一個圓形.代碼如下：
html:
<div class = " size example1 " ></div>
css:
.size{
width:200px;
height: 200px;
background: #8BC34A;
}
.example1{
border - radius:100px;
}
2、自適應橢圓
思路：border-radius 這個屬性還有另外一個鮮為人知的真相，它不僅可以接受長度值，還可以接受百分比值。這個百分比值會基於元素的尺寸進行解析.這意味著相同的百分比可能會計算出不同的水平和垂直半徑。代碼如下：
html:
<div class = " example3 " ></div>
css:
.example3{
width:200px;
height: 150px;
border -radius: 50 % ;
background: #8BC34A;
}
3、自適應的半橢圓:沿橫軸劈開的半橢圓
思路：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 屬性分別指定4、3、2、1 個由空格分隔的值時，這些值是以這樣的規律分配到四個角上的（請注意，對橢圓半徑來說，斜杠前和斜杠後最多可以各有四個參數，這兩組值是以同樣的方法分配到各個角的）
代碼如下：自適應的半橢圓:沿橫軸劈開的半橢圓
html:
<div class = " example4 " ></div>
css:
.example4{
width:200px;
height: 150px;
border -radius: 50 % / 100 % 100 % 0 0 ;
background: #8BC34A;
}
4、自適應的半橢圓:沿縱軸劈開的半橢圓
思路：自適應的半橢圓:沿縱軸劈開的半橢圓
代碼如下：
html:
<div class = " example5 " ></div>
css:
.example5{
width:200px;
height: 150px;
border -radius: 100 % 0 0 100 % / 50 % ;
background: #8BC34A;
}
5、四分之一橢圓
思路：其中一個角的水平和垂直半徑值都需要是100%，而其他三個角都不能設為圓角。
代碼如下：
html:
<div class = " example6 " ></div>
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:
<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;
}
7、平行四邊形
思路：偽元素方案:是把所有樣式（背景、邊框等）應用到偽元素上，然後再對偽元素進行變形。因為我們的內容並不是包含在偽元素裡的，所以內容並不會受到變形的影響。代碼如下：
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() 變形來說很有用，還適用於其他任何變形樣式，當我們想變形一個元素而不想變形它的內容時就可以用到它。
8、菱形
思路：我們把這個技巧針對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;
}
技巧總結：這個技巧的關鍵在於，我們利用偽元素以及定位屬性產生了一個方塊， 然後對偽元素設置樣式，並將其放置在其宿主元素的下層。這種思路同樣可以運用在其他場景中，從而得到各種各樣的效果。
9、菱形圖片
思路：基於變形的方案，
我們想讓圖片的寬度與容器的對角線相等，而不是與邊長相等。需要用到勾股定理，這個定理告訴我們，一個正方形的對角線長度等於它的邊長乘以根號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 屬性來放大圖片時，只會以它的左上角為原點進行縮放，從而迫使我們動用額外的負外邊距來把圖片的位置調整回來.
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、弧形切角
思路：上述漸變技巧還有一個變種，可以用來創建弧形切角（很多人也把這種效果稱為“內凹圓角” ，因為它看起來就像是圓角的反向版本） 。唯一的區別在於，我們會用徑向漸變來替代上述線性漸變，代碼如下：
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 的解決方案：我們現在可以通過一個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; }
}
相信各位都收穫不少,趕快利用上面教學去試試吧!!
文章原始出處
