CSS中的形状
CSS中的形狀
- 自適應的橢圓
- 橢圓
- 半橢圓
- 四分之一橢圓
- 平行四邊形
- 其他形狀
- 大于號
- 愛心
- 六芒星
自適應的橢圓
橢圓
在日常的編寫代碼中可以發現給任何正方形元素設置一個足夠大的 borderradius，就可以把它變成一個圓形
background: #fb3; width: 200px; height: 200px; border-radius: 100px; /* >= 正方形邊長的一半 */要寫出橢圓的形式就要將border-radius 這個屬性后面的值改為百分比形式。這個百分比值會基于元素的尺寸進行解析，即寬度用于水平半徑的解析，而高度用于垂直半徑的解析。這意味著相同的百分比可能會計算出不同的水平和垂直半徑。因此，如果要創建一個自適應的橢圓，我們可以把這兩個半徑值都設置為 50%：
border-radius: 50%;最終，只需要這一行代碼，我們就可以得到一個自適應的橢圓了
半橢圓
現在我們已經知道如何用 CSS 來生成一個自適應的橢圓了，接下來很自然地就會問到：我們是否還能生成其他常見的形狀呢，比如橢圓的一部分？讓我們先來思考一下半橢圓吧
幸運的是，border-radius 的語法比我們想像中靈活得多。你可能會驚訝地發現 border-radius 原來是一個簡寫屬性。我們可以為元素的每個角指定不同的值，而且還有兩種方法可以做到這一點。第一種方法就是使用它所對應的各個展開式屬性：
? border-top-left-radius
? border-top-right-radius
? border-bottom-right-radius
? border-bottom-left-radius
為 border-radius 屬性分別指定4、3、2、1 個由空格分隔的值時，這些值是以這樣的規律分配到四個角上的（請注意，對橢圓半徑來說，斜杠前和斜杠后最多可以各有四個參數，這兩組值是以同樣的方法分配到各個角的）
把所有這些結論綜合起來，我們就可以很容易地寫出 CSS 代碼，來生成圖1中那樣自適應的半橢圓
四分之一橢圓
在創建了一個完整的橢圓和半橢圓之后，很自然的下一個問題就是如何生成四分之一橢圓（其形狀如圖 3 所示）。延續前面所講的思路，我們注意到，要創建一個四分之一橢圓，其中一個角的水平和垂直半徑值都需要是100%，而其他三個角都不能設為圓角。由于這四個角的半徑在水平和垂直方向上都是相同的，我們甚至都不需要使用斜杠語法了。最終代碼應該是這樣的
border-radius: 100% 0 0 0;你不免還會順著往下想，是不是還能用 border-radius 來生成橢圓的其他切塊（比如八分之一橢圓、三分之一橢圓）？很遺憾，你可能會失望了，因為 border-radius 屬性是無法生成這些形狀的。
平行四邊形
讓我們試著用 CSS 創建一個按鈕狀的平行四邊形鏈接。我們的起點就是一個普通的塊狀按鈕，輔以一些簡單的樣式。然后，我們可以通過 skew() 的變形屬性來對這個矩形進行斜向拉伸：
transform: skewX(-45deg);但是，這導致它的內容也發生了斜向變形，這很不好看，而且難讀（參見圖 4）。有沒有辦法只讓容器的形狀傾斜，而保持其內容不變呢？
嵌套元素方案
我們在圖 3-15 中可以看到，這個方法的表現很不錯，但它也意味著我們不得不添加額外的 HTML 元素。
偽元素方案
這個技巧不僅對 skew() 變形來說很有用，還適用于其他任何變形樣式，當我們想變形一個元素而不想變形它的內容時就可以用到它。舉個例子，我們把這個技巧針對 rotate() 變形樣式稍稍調整一下，再用到一個正方形元素上，就可以很容易地得到一個菱形。
這個技巧的關鍵在于，我們利用偽元素以及定位屬性產生了一個方塊，然后對偽元素設置樣式，并將其放置在其宿主元素的下層。這種思路同樣可以運用在其他場景中，從而得到各種各樣的效果
其他形狀
大于號
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"> <title>畫圖</title><style type="text/css">.a2{position: absolute;left: 50px;top: 50px;width: 0;height: 0;border:70px solid;border-color: transparent transparent transparent red; }.a1{position: absolute;left: 50px;top:70px;width: 0;height: 0;border:50px solid;border-color: transparent transparent transparent #fff;}</style></head><body> <div class="a2"></div><div class="a1"></div> </body> </html>愛心
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"> <title>畫圖</title><style type="text/css">.a1{position: absolute;width: 100px;height: 100px;border-radius: 100%;background-color: red;}.a2{width: 100px;height: 100px;border-radius: 100%;background-color: red;position: absolute;left: 75px;}.a2::after{position:absolute;left:-83px;top:-16px;content: "";width:100px;height:100px;background-color: red;transform: rotate(45deg);margin:50px}</style></head><body><div class="a1"></div><div class="a2"></div></body> </html>六芒星
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"> <title>畫圖</title><style type="text/css">.a1{width: 0;height: 0;border:40px solid;border-color: transparent transparent red;}.a1::after{content: "";position: absolute;left: 6px;top: 60px;width: 0;height: 0;border:40px solid;border-color:red transparent transparent ;}}</style></head><body><div class="a1"></div><div class="a2"></div></body> </html>總結
- 上一篇： 北语18秋《计算机应用基础》练习1,每日
- 下一篇： css svg使用_使用CSS使SVG响