奇妙的 CSS shapes(CSS圖形)

CSS 發(fā)展到今天已經(jīng)越來(lái)越強(qiáng)大了。其語(yǔ)法的日新月異，讓很多以前完成不了的事情，現(xiàn)在可以非常輕松的做到。今天就向大家介紹幾個(gè)比較新的強(qiáng)大的 CSS 功能：

• clip-path
• shape-outside

shape 的意思是圖形，CSS shapes 也就是 CSS 圖形的意思，也就是使用 CSS 生成各種圖形（圓形、矩形、橢圓、多邊形等幾何圖形）。

CSS3之前，我們能做的只有矩形，四四方方，條條框框。

三角形

通常會(huì)使用透明的border模擬出一個(gè)三角形：

.traingle {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid yellowgreen;
}

切角

《CSS Secret》里面的方法，采用多重線性漸變實(shí)現(xiàn)切角。

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

梯形

利用偽元素加旋轉(zhuǎn)透視實(shí)現(xiàn)梯形：

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

當(dāng)然，還有另一種更簡(jiǎn)單的方法是利用border實(shí)現(xiàn)，借助上面的構(gòu)造三角形的方法，在矩形兩側(cè)構(gòu)造兩個(gè)透明的三角形：

.trapezoid {
    position: relative;
    width: 60px;
    border-top: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

五邊形

梯形加上三角形，很容易就組合成一個(gè)五邊形，這里需要借助一個(gè)偽元素實(shí)現(xiàn)：

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

六邊形

看看上面的梯形，如果兩個(gè)反方向且底邊同樣大小的梯形，疊加在一起，是不是就能得到一個(gè)六邊形呢？

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

八邊形

六邊形都解決了，八邊形也不在話下，一個(gè)矩形加上兩個(gè)梯形，可以合成一個(gè)八邊形。

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

五角星

好的，探索完多邊形，我們繼續(xù)探索X角星。
先來(lái)看看五角星，要怎么實(shí)現(xiàn)呢？當(dāng)然是直接打出來(lái)啦 -- ★☆

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

六角星

六角星呢？想象一下，一個(gè)向上的三角形 ▲，疊加上一個(gè)向下的三角形 ▼，就可以得到一個(gè)六邊形：

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

八角星

八角星呢？八個(gè)角那么多呢。其實(shí)使用兩個(gè)矩形進(jìn)行旋轉(zhuǎn)拼接就可以了。

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

十二角星

好。最后多角星再來(lái)一個(gè)十二級(jí)角星。在八角星的基礎(chǔ)上，再增加一個(gè)矩形，就能得到十二角啦。也就是要過(guò)第一個(gè)偽元素。

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

橢圓

最后，再來(lái)使用傳統(tǒng)的方法畫一個(gè)橢圓，過(guò)去 CSS3 畫橢圓，基本上只能借助 border 實(shí)現(xiàn)。
這里使用 border 畫一個(gè)蛋的形狀：

.ellipse {
   width: 120px;
   height: 160px;
   background-color: yellowgreen;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

clip-path

CSS 新屬性 clip-path，意味裁剪路徑的意思，讓我們可以很便捷的生成各種幾何圖形。
clip-path 通過(guò)定義特殊的路徑，實(shí)現(xiàn)我們想要的圖形。而這個(gè)路徑，正是 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;
}

看上去很多，其實(shí)很好理解，如果接觸過(guò) SVG 的 path，其實(shí)就是照搬 SVG 的 path 的一些定義。換言之，如果沒(méi)有接觸過(guò) SVG，看完本文后再去學(xué)習(xí) SVG 路徑，也會(huì)十分容易上手。
根據(jù)不同的語(yǔ)法，我們可以生成不同的圖形。
例如 clip-path: circle(50px at 50px 50px)表示在元素的 （50px, 50px）處，裁剪生成一個(gè)半徑為 50px 的圓。

以元素的左上角為坐標(biāo)起點(diǎn)

而整個(gè)clip-path 屬性，最為重要的當(dāng)屬 polygon，可以利用 polygon 生成任意多邊形。

clip-path 示例

下面分別列舉使用 clip-path 生成一個(gè)圓形和一個(gè)十邊形。

/* 圓形 */
.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）處，裁剪生成一個(gè)半徑為 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 個(gè)坐標(biāo)點(diǎn)。我們的圖形就是依次連接這 10 個(gè)坐標(biāo)點(diǎn)形成一個(gè)裁切圖形。
當(dāng)然，這里采用的是百分比，也可以使用具體的數(shù)值。