CSS—形狀就該爲所欲爲

序

說到div的形狀，基本上想到的都是圓形或者方形，這兩種形狀其實也已經符合了前端95%的應用場景(95%的數據從哪得來的 - - !)，可是做爲一個不肯隨波逐流的程序員，就是要搞事情。

兼容性

(圖片來源於網絡)果真限制咱們創造的不是想象力，而是兼容性。支持瀏覽器的版本偏高，若是你是作正經項目仍是不推薦使用，若是是本身的或者比較新潮的項目，那就開搞吧！ ( 道路千萬條，兼容第一條。嚐鮮有風險，翻車兩行淚。)。手機端記得加上-webkit-clip-path: polygon()

幾個小案例先祭天

1. 圓形 => 西瓜

clip-path: polygon(100% 100% , 0 100% , 50% 0 );

2. 正方形 => 三角形

clip-path: polygon(0 0 , 0 100% , 100% 50% );

3. 正方形 => 箭頭

clip-path: polygon(100% 50% , 0 100% , 50% 50% , 0 0);

4. 橢圓形 => 鑽石

clip-path: polygon(50% 100% , 100% 10% , 0 10%);

分析 clip-path:polygon()

先根據上面的三角形畫一張分析圖

能夠看到括號中由一對值組成。在當前的div內，分別對應 x 跟y座標 ，接收單位px 或者%(推薦百分比)，用逗號分隔，逗號後寫入的值表明一個新的點，新的點會與原來的點連成線，點的數量不限。

兩個問題：

1. 點一旦多起來，座標一堆。眼睛看花了，修改也不方便。

• 既然你都作了前端，想必你必定已經掌握了通靈之術：

火狐在這個屬性的調試上有很好的支持
複製代碼

點擊屬性旁邊的圖標，線條就能夠隨意拖動了，會隨着你是`%`仍是`px`自動進行調整
複製代碼

2. 點與點只能連成直線，那我想要畫個帶圓弧的形狀豈不是要建無數個點。

• 很遺憾，這個屬性雖然也有對應的圓形clip-path:circle()跟橢圓clip-path: ellipse()但二者並不能同時使用。而且由於這個屬性是裁剪的，只要超出線的範圍都會被裁減掉,因此嘗試用::after或::befor填充上弧形，效果也不盡人意，參照這個西瓜。

  

• 另一個缺點就是，超出部分都不會顯示，而普通的box-shadow是基於這個盒子作的陰影，理所固然的陰影也被裁剪掉了。
  

  

  
  因此須要給box-shadow加上內陰影box-shadow: inset 3px 2px 16px #bbb;(可是陰影是不會根據你的線條來造成的，仍是同樣根據盒子，因此使用起來要見仁見智了)

分析 clip-path:circle() 與 clip-path: ellipse()

clip-path:circle是用來裁剪圓形,單位也是支持px與%,它提供了三個參數(圓形半徑 at x方向座標 y方向座標)

clip-path: ellipse跟上面區別就在於它把圓的半徑拆分紅x方向的半徑/y方向的半徑

動畫

clip-path對動畫的過渡有着很好的支持，下面來一個小demo

.demo_box{
    width: 100px;
    height: 100px;
    border-radius:50%;
    background:#ffa700;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 25%, 50% 50%, 0% 80%);
    animation:a 1s infinite alternate;
}
@keyframes a {
    0%, 10% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 25%, 50% 50%, 0% 80%)
    }
    90%, 100% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 50%, 60% 50%, 0% 60%)
    }
}
複製代碼

搭配shape-outside讓圖形嵌入文字中

shape-outside與clip-path同樣都有對應的polygon、circle、ellipse它們對應的參數也是同樣的，須要div浮動才能生效

贈送掃二維碼CSS動畫

路線的條紋是截圖工具的問題其實是沒有的。

<div class="scan"></div>

.scan {
  width: 150px;
  height: 150px;
  margin: 30px auto;
  position: relative;
  background: linear-gradient(to left, #108EE9, #108EE9) left top no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) left top no-repeat, linear-gradient(to left, #108EE9, #108EE9) right top no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) right top no-repeat, linear-gradient(to left, #108EE9, #108EE9) left bottom no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) left bottom no-repeat, linear-gradient(to left, #108EE9, #108EE9) right bottom no-repeat, linear-gradient(to left, #108EE9, #108EE9) right bottom no-repeat;
  background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}

.scan::after {
  content: '';
  width: 140px;
  border: 1px solid #BBE2FF;
  position: absolute;
  left: 5px;
  top: 2px;
  animation: myfirst 4s infinite;
}
@keyframes myfirst {
  from {
    top: 2px;
  }
  to {
    top: 144px;
  }
}
複製代碼