CSS 發展到今天已經越來越強大了。其語法的日新月異,讓很多以前完成不了的事情,現在可以非常輕鬆的做到。今天就向大家介紹幾個比較新的強大的 CSS 功能:
- [ ] clip-path
- [ ] shape-outside
shape 的意思是圖形,CSS shapes 也就是 CSS 圖形的意思,也就是使用 CSS 生成各種圖形(圓形、矩形、橢圓、多邊形等幾何圖形)。
CSS3之前,我們能做的只有矩形,四四方方,條條框框。
CSS3
CSS3出來後,我們有了更廣闊的施展空間,通過
- [ ] border-radius
- [ ] border
- [ ] transform
- [ ] 僞元素配合
- [ ] gradient 漸變
我們能夠作出非常多的幾何圖形。
除去最常見的矩形,圓形(border-radius),下面稍微列舉一些其他幾何圖形:
三角形
通常會使用透明的border模擬出一個三角形:
.traingle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellowgreen;
}
切角
《CSS Secret》裏面的方法,採用多重線性漸變實現切角。
.notching {
width: 40px;
height: 40px;
padding: 40px;
background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left,
linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right,
linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right,
linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
梯形
利用僞元素加旋轉透視實現梯形:
.trapezoid{
position: relative;
width: 60px;
padding: 60px;
}
.trapezoid::before{
content:"";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform: perspective(20px) scaleY(1.3) rotateX(5deg);
transform-origin: bottom;
background: yellowgreen;
}
當然,還有另一種更簡單的方法是利用border實現,藉助上面的構造三角形的方法,在矩形兩側構造兩個透明的三角形:
.trapezoid {
position: relative;
width: 60px;
border-top: 60px solid yellowgreen;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
五邊形
梯形加上三角形,很容易就組合成一個五邊形,這裏需要藉助一個僞元素實現:
.pentagon {
position: relative;
width: 60px;
border-bottom: 60px solid yellowgreen;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
.pentagon::before {
content:"";
position: absolute;
top: 60px;
left: -40px;
border-top: 60px solid yellowgreen;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
.pentagon {
position: relative;
width: 60px;
border-bottom: 60px solid yellowgreen;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
六邊形
看看上面的梯形,如果兩個反方向且底邊同樣大小的梯形,疊加在一起,是不是就能得到一個六邊形呢?
.pentagon {
position: relative;
width: 60px;
border-bottom: 60px solid yellowgreen;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
.pentagon::before {
content: "";
position: absolute;
width: 60px;
height: 0px;
top: 60px;
left: -40px;
border-top: 60px solid yellowgreen;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
八邊形
六邊形都解決了,八邊形也不在話下,一個矩形加上兩個梯形,可以合成一個八邊形。
.octagon {
position: relative;
width: 40px;
height: 100px;
background: yellowgreen;
}
.octagon::before {
content: "";
height: 60px;
position: absolute;
top: 0;
left: 40px;
border-left: 30px solid yellowgreen;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.octagon::after {
content: "";
height: 60px;
position: absolute;
top: 0;
left: -30px;
border-right: 30px solid yellowgreen;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
五角星
好的,探索完多邊形,我們繼續探索X角星。
先來看看五角星,要怎麼實現呢?當然是直接打出來啦 -- ★☆
開個玩笑,這裏使用 3 個三角形疊加旋轉在一起實現。
.star {
margin: 50px 0;
position: relative;
width: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid yellowgreen;
border-left: 100px solid transparent;
transform: rotate(35deg) scale(.6);
}
.star:before {
content: '';
position: absolute;
border-bottom: 80px solid yellowgreen;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
top: -45px;
left: -65px;
transform: rotate(-35deg);
}
.star:after {
content: '';
position: absolute;
top: 3px;
left: -105px;
border-right: 100px solid transparent;
border-bottom: 70px solid yellowgreen;
border-left: 100px solid transparent;
transform: rotate(-70deg);
}
六角星
六角星呢?想象一下,一個向上的三角形 ▲,疊加上一個向下的三角形 ▼,就可以得到一個六邊形:
.sixstar {
position: relative;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellowgreen;
}
.sixstar:after {
content: "";
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid yellowgreen;
top: 30px;
left: -50px;
}
八角星
八角星呢?八個角那麼多呢。其實使用兩個矩形進行旋轉拼接就可以了。
.eightstar {
position: relative;
width: 100px;
height: 100px;
background-color: yellowgreen;
transform: rotate(30deg);
}
.eightstar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
transform: rotate(45deg);
background-color: yellowgreen;
}
十二角星
好。最後多角星再來一個十二級角星。在八角星的基礎上,再增加一個矩形,就能得到十二角啦。也就是要過第一個僞元素。
.twelvestar {
position: relative;
width: 100px;
height: 100px;
margin-bottom: 100px!important;
background-color: yellowgreen;
transform: rotate(30deg);
}
.twelvestar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
transform: rotate(30deg);
background-color: yellowgreen;
}
.twelvestar::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
transform: rotate(60deg);
background-color: yellowgreen;
}
橢圓
最後,再來使用傳統的方法畫一個橢圓,過去 CSS3 畫橢圓,基本上只能藉助 border 實現。
這裏使用 border 畫一個蛋的形狀:
.ellipse {
width: 120px;
height: 160px;
background-color: yellowgreen;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
上面所講述的是使用傳統 CSS3 的方式繪製幾何圖形,前人栽樹後人乘涼,之前的大牛們在 CSS 繪製幾何圖形上已經做了非常深入的研究,接下來我們將要了解一些更高級的繪製幾何圖形的方法。
clip-path
CSS 新屬性 clip-path,意味裁剪路徑的意思,讓我們可以很便捷的生成各種幾何圖形。
clip-path 通過定義特殊的路徑,實現我們想要的圖形。而這個路徑,正是 SVG 中的 path 。
看看它的 API:
{
/* Keyword values */
clip-path: none;
/* Image values */
clip-path: url(resources.svg#c1);
/* Box values
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box
clip-path: border-box
clip-path: padding-box
clip-path: content-box
/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
}
看上去很多,其實很好理解,如果接觸過 SVG 的 path,其實就是照搬 SVG 的 path 的一些定義。換言之,如果沒有接觸過 SVG,看完本文後再去學習 SVG 路徑 ,也會十分容易上手。
根據不同的語法,我們可以生成不同的圖形。
例如 clip-path: circle(50px at 50px 50px) 表示在元素的 (50px, 50px)處,裁剪生成一個半徑爲 50px 的圓。
以元素的左上角爲座標起點
而整個 clip-path 屬性,最爲重要的當屬 polygon,可以利用 polygon 生成任意多邊形。
clip-path 示例
下面分別列舉使用 clip-path 生成一個圓形和一個十邊形。
/* 圓形 */
.circle {
width: 100px;
height: 100px;
background-color: yellowgreen;
clip-path: circle(50px at 50px 50px);
}
/* 十邊形 */
.polygon {
width: 100px;
height: 100px;
background-color: yellowgreen;
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}
clip-path: circle(50px at 50px 50px) 上文也講了,表示在元素的 (50px, 50px)處,裁剪生成一個半徑爲 50px 的圓。
而在 clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%) 中,依次列出了 10 個座標點。我們的圖形就是依次連接這 10 個座標點形成一個裁切圖形。
當然,這裏採用的是百分比,也可以使用具體的數值。
clip-path 動畫
clip-path 另外一個強大之處在於可以進行 CSS transtion 與 CSS animation,也就是過渡和動畫。
看一個多邊形的過渡切換動畫。
<div class="polygon-animate"></div>
.polygon-animate {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: crimson;
transition: .3s;
clip-path: polygon(
50% 0%,
0% 100%,
100% 100%,
100% 100%,
100% 100%,
100% 100%,
100% 100%,
100% 100%,
100% 100%
);
animation: polygon-ani 5s linear infinite;
}
@keyframes polygon-ani {
10% {
background-color: darkorange;
clip-path: polygon(
50% 0%,
100% 50%,
50% 100%,
0% 50%,
0% 50%,
0% 50%,
0% 50%,
0% 50%,
0% 50%
);
}
14% {
clip-path: polygon(
50% 0%,
100% 50%,
50% 100%,
0% 50%,
0% 50%,
0% 50%,
0% 50%,
0% 50%,
0% 50%
);
}
24% {
background-color: lemonchiffon;
clip-path: polygon(
100% 38%,
82% 100%,
82% 100%,
18% 100%,
0% 38%,
0% 38%,
0% 38%,
0% 38%,
50% 0%
);
}
28% {
clip-path: polygon(
100% 38%,
82% 100%,
82% 100%,
18% 100%,
0% 38%,
0% 38%,
0% 38%,
0% 38%,
50% 0%
);
}
38% {
background-color: darkturquoise;
clip-path: polygon(
50% 0%,
100% 25%,
100% 75%,
100% 75%,
50% 100%,
0% 75%,
0% 75%,
0% 25%,
0% 25%
);
}
42% {
clip-path: polygon(
50% 0%,
100% 25%,
100% 75%,
100% 75%,
50% 100%,
0% 75%,
0% 75%,
0% 25%,
0% 25%
);
}
52% {
background-color: darkcyan;
clip-path: polygon(
50% 0%,
90% 20%,
100% 60%,
75% 100%,
25% 100%,
25% 100%,
0% 60%,
10% 20%,
50% 0%
);
}
56% {
clip-path: polygon(
50% 0%,
90% 20%,
100% 60%,
75% 100%,
25% 100%,
25% 100%,
0% 60%,
10% 20%,
50% 0%
);
}
66% {
background-color: deepskyblue;
clip-path: polygon(
30% 0%,
70% 0%,
70% 0%,
100% 30%,
100% 70%,
70% 100%,
30% 100%,
0% 70%,
0% 30%
);
}
70% {
clip-path: polygon(
30% 0%,
70% 0%,
70% 0%,
100% 30%,
100% 70%,
70% 100%,
30% 100%,
0% 70%,
0% 30%
);
}
80% {
background-color: indigo;
clip-path: polygon(
83% 12%,
100% 43%,
94% 78%,
68% 100%,
32% 100%,
6% 78%,
0% 43%,
17% 12%,
50% 0%
);
}
84% {
clip-path: polygon(
83% 12%,
100% 43%,
94% 78%,
68% 100%,
32% 100%,
6% 78%,
0% 43%,
17% 12%,
50% 0%
);
}
94% {
background-color: crimson;
clip-path: polygon(
50% 0%,
0% 100%,
100% 100%,
100% 100%,
100% 100%,
100% 100%,
100% 100%,
100% 100%,
100% 100%
);
}
}
CodePen Demo -- Clip-path 多邊形過渡動畫
圖形變換動畫
除此之外,我們還可以嘗試,將一個完整的圖形,分割成多個小圖形,這也是 clip-path 的魅力所在,純 CSS 的圖形變換:
CodePen Demo -- Clip-path triangle2rect
<hgroup class="triangle2rect">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</hgroup>
.triangle2rect {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: aniContainer 2s infinite alternate;
}
.triangle2rect div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.a {
background: deeppink;
clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
animation: a 2s infinite alternate;
}
.b {
background: deeppink;
clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
animation: b 2s infinite alternate;
}
.c {
background: deeppink;
clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
animation: c 2s infinite alternate;
}
.d {
background: deeppink;
clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
animation: d 2s infinite alternate;
}
@keyframes a {
0%, 10% {
background: deeppink;
clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
}
90%, 100% {
background: #000;
clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%);
}
}
@keyframes b {
0%, 10% {
background: deeppink;
clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
}
90%, 100% {
background: #000;
clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%);
}
}
@keyframes c {
0%, 10% {
background: deeppink;
clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
}
90%, 100% {
background: #000;
clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%);
}
}
@keyframes d {
0%, 10% {
background: deeppink;
clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
}
90%, 100% {
background: #000;
clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%);
}
}
@keyframes aniContainer {
0%, 10% {
width: 100px;
height: 100px;
}
90%, 100% {
width: 250px;
height: 60px;
}
}
clip-path 動畫的侷限
clip-path 動畫雖然美好,但是存在一定的侷限性,那就是進行過渡的兩個狀態,座標頂點的數量必須一致。
也就是如果我希望從三角形過渡到矩形。假設三角形和矩形的 clip-path 分別爲:
三角形:clip-path: polygon(50% 0, 0 100%, 100% 0)
矩形: clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
進行過渡動畫時候,直接從 polygon(50% 0, 0 100%, 100% 0) --> polygon(0 0, 100% 0, 100% 100%, 0 100%) 是不行的,因爲是從 3 個座標點變換到 4 個座標點。
因此這裏需要這用一個討巧的辦法,在三角形的表示方法中,使用四個座標點表示,其中兩個座標點進行重合即可。也就是:
三角形:clip-path: polygon(50% 0, 0 100%, 100% 0) -> clip-path: polygon(50% 0, 50% 0, 0 100%, 100% 0)
N邊形過渡動畫
如果腦洞夠大,隨機生成 N(N>=1000)邊形,進行變換,會是什麼效果呢?
see one see:
<div></div>
div {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all .5s;
transition-timing-function: cubic-bezier(.92,-0.5,1,.12);
border-radius: 50%;
}
setInterval(function() {
const length = 2000;
let el = document.querySelectorAll("div")[0];
let coordinate = "";
for (let i = 0; i < length; i++) {
coordinate +=
parseInt(Math.random() * 10000) / 100 +
"% " +
parseInt(Math.random() * 10000) / 100 +
"%, ";
}
coordinate = "polygon(" + coordinate.slice(0, -2) + ")";
el.style.clipPath = coordinate;
el.style.backgroundColor =
"#" + (~~(Math.random() * (1 << 24))).toString(16);
}, 500);
變換的瞬間很有爆炸的感覺。不過這裏有個很大的問題,只是隨機生成了 2000 個座標點,然後使用 clip-path 將這些座標點連接起來,並不是符合要求的多邊形。
CodePen Demo -- 圖文混排 shape-outside
心形、菱形
CodePen Demo -- 圖文混排 shape-outside
clip-path 與 shape-outside 的兼容性
額,比較遺憾,這兩個屬性的兼容性目前仍處於比較尷尬的境地。感興趣的可以看看 CANIUSE 。全面兼容使用仍需努力。
所以本文所展示的 Demo 都是在 -webkit- 內核瀏覽器下完成的。