查看原文可以有更好的排版效果哦

前言

我們在平時的網(wǎng)頁中，經(jīng)常會見到這樣的優(yōu)惠券或者其他的券（特征就是會有反方向的圓角）。

可能大部分前端人員為了簡單，直接采用圖片的方式，直接把整張圖作為背景。其實(shí)這也沒什么不好的，簡單，方便，還沒有兼容性問題，ie6跑起來都沒得問題。

如果不考慮那些低舊瀏覽器的話，還是有辦法直接用css來實(shí)現(xiàn)，有幾個好處

1.擴(kuò)展方便，比如之前是300 100的，現(xiàn)在要改成300 150的，就一行代碼的事
2.沒有圖片，加載起來也更快了，也節(jié)省了帶寬

思路

我們先實(shí)現(xiàn)大致的框架，左右兩部分

<style> html,body{box-sizing:border-box;margin:0;padding:20px;height:100%;background:#fadaa7; } .coupon{display:inline-block;overflow:hidden;border-radius:10px; } .coupon-left{float:left;width:150px;height:150px;background:#252525; } .coupon-con{float:left;width:350px;height:150px;background:#fff; } </style> <div class="coupon"><div class="coupon-left"></div><div class="coupon-con"></div> </div>

下面就來實(shí)現(xiàn)中間看著比較復(fù)雜的"凹槽"部分

我能想到跟圓角相關(guān)的有圓角、圓形、徑向...這些吧

有人說svg也可以，確實(shí)svg什么都可以做，不光是這種形狀，只要畫個路徑，填充一下就完事，這個比較通用，并不是這個特例，所以在這里不討論用這個方式。
還有一個原因，svg生成的形狀也是固定了的，只能等比縮放，不能做其他自適應(yīng)了。

1.圓角

看到這樣的形狀，一般人可能會想會不會可以用border-radius的負(fù)值呢，畢竟像margin那些，使用負(fù)值往往可以帶來意想不到的效果

.con{border-radius:-10px; }

很可惜，這種寫法根本就是不合法的，在谷歌瀏覽器上打開控制臺可以看到直接被刪除了。

2.圓形

雖然說這種思路不行，但是我們可以換一種思路。

假設(shè)我們現(xiàn)在有一個圓，它本身沒有顏色，但是它有一個黑色的邊框

現(xiàn)在我們想象一下，假如這個圓的邊框越來越大，外面有個容器如果超出就會隱藏，會發(fā)生什么呢

如果這個圓在右下角，那么就變成了這樣

這不就是我們需要的嗎？

現(xiàn)在我們用css來實(shí)現(xiàn)

根據(jù)上面的分析，我們背景的顏色應(yīng)該是圓的邊框的顏色，所以原背景要去掉

.coupon-left{position:relative;overflow:hidden;/*background:#252525*/ } /*為了減少html的結(jié)構(gòu)，我們使用偽元素*/ .coupon-left::before{position:absolute;width:20px;height:20px;top:-210px;right:-210px;border-radius:50%;border:200px solid #252525;/*邊框只要能夠覆蓋整個容器就行*/ }

這樣就實(shí)現(xiàn)了一個凹槽。

本來以為這樣下去，復(fù)制一下，改寫一下就完事了的，結(jié)果發(fā)現(xiàn)沒這么簡單，因?yàn)楝F(xiàn)在形狀是被裁剪出來的，所以我們不能讓上一個圓角把整個都覆蓋，不然下面的圓角就出不來了，這時我們要用到clip裁剪功能

關(guān)于clip這里簡單介紹一下，我們一般會用到rect這個功能，有四個值，分別是上右下左

clip: rect(<top>, <right>, <bottom>, <left>);

這里我們改造一下我們剛才寫的樣式，添加如下代碼

.coupon-left::before{clip: rect(0,210px,285px,0); }

這樣就和下半部分隔離開來了，下面做下半部分的凹槽，我們用::after，寫法完全一致，注意一下坐標(biāo)就行了

.coupon-left::after{content: '';position: absolute;top: -210px;display: block;right: -210px;width: 20px;height: 20px;border-radius: 50%;border: 200px solid #252525;clip: rect(135px,210px,285px,0); }

這樣就完美的實(shí)現(xiàn)了兩個凹槽，右邊的原理同樣，下面是完整的css代碼

html,body{box-sizing:border-box;margin:0;padding:20px;height:100%;background:#fadaa7; } .coupon{display:inline-block;overflow:hidden;border-radius:10px; } .coupon-left{float:left;width:150px;height:150px;position:relative; } .coupon-left::before{content: '';position: absolute;top: -210px;display: block;right: -210px;width: 20px;height: 20px;border-radius: 50%;border: 200px solid #252525;clip: rect(0,210px,285px,0); } .coupon-left::after{content: '';position: absolute;bottom: -210px;display: block;right: -210px;width: 20px;height: 20px;border-radius: 50%;border: 200px solid #252525;clip: rect(135px,210px,285px,0); } .coupon-con{float:left;width:350px;height:150px;position:relative; } .coupon-con::before{content: '';position: absolute;top: -410px;display: block;left: -410px;width: 20px;height: 20px;border-radius: 50%;border: 400px solid #fff;clip: rect(0,800px,485px,410px); } .coupon-con::after{content: '';position: absolute;bottom: -410px;display: block;left: -410px;width: 20px;height: 20px;border-radius: 50%;border: 400px solid #fff;clip: rect(335px,800px,485px,410px); }

下面是codepen演示

https://codepen.io/xboxyan/pe...

3.徑向漸變

還有一個思路就是徑向漸變。

關(guān)于徑向漸變的具體使用可以參考張鑫旭的文章CSS3 radial-gradient徑向漸變語法及輔助理解案例10則

那么怎樣實(shí)現(xiàn)我們要的效果呢

我們先看看徑向漸變的語法

radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+); 徑向漸變由它的中心定義。

用法

{background:radial-gradient(circle at 50px 50px, yellow, orange 33.33%, red 66.666%, white) }

我們把漸變的顏色改成透明到黑色的漸變

{background:radial-gradient(circle at 50px 50px, transparent, #252525) }

現(xiàn)在把透明的部分給一個距離，灰色的部分也給一個距離，讓他們之前的漸變區(qū)域重合，就變成純色了

{background:radial-gradient(circle at 50px 50px, transparent 20px, #252525 20px) }

現(xiàn)在把這個空心圓移到邊緣

{background:radial-gradient(circle at right top, transparent 20px, #252525 20px) }

現(xiàn)在就是如何做出兩個凹槽的問題

我們有兩種方式，一種是和上面的一樣，用兩個偽元素拼接而成，第二種就是直接利用css3的多背景拼接

我們先說說第二種

{background:radial-gradient(circle at right top, transparent 20px, #252525 20px, #252525 100px, transparent 100px),radial-gradient(circle at right bottom, transparent 20px, #252525 20px, #252525 100px, transparent 100px) }

我們可以繼續(xù)拼接，可能可以實(shí)現(xiàn)我們想要的效果

現(xiàn)在來說說第一種方法

我們把代碼放入我們的例子當(dāng)中

.coupon-left::before{content: '';position: absolute;top: 0;left: 0;right:0;height:50%;background:radial-gradient(circle at right top, transparent 10px, #252525 10px, #252525 10px) } .coupon-left::after{content: '';position: absolute;bottom: 0;left: 0;right:0;height:50%;background:radial-gradient(circle at right bottom, transparent 10px, #252525 10px, #252525 10px) } .coupon-con::before{content: '';position: absolute;top: 0;left: 0;right:0;height:50%;background:radial-gradient(circle at left top, transparent 10px, #252525 10px, #fff 10px) } .coupon-con::after{content: '';position: absolute;bottom: 0;left: 0;right:0;height:50%;background:radial-gradient(circle at left bottom, transparent 10px, #252525 10px, #fff 10px)

怎么樣，是不是很方便？里面都是相對值，意味著有更好的適應(yīng)性

下面是codepen演示

https://codepen.io/xboxyan/pe...

小節(jié)

相比于用圓形來實(shí)現(xiàn)，這種徑向漸變更方便擴(kuò)展，寫起來也容易。

但是并不是說圓形的思路不對，如果只是做一個圓形缺口的話，那種寫法更方便，在思維上，也更領(lǐng)先一步，更能鍛煉一個人的空間思考和想象能力，更有設(shè)計師角度的意味，這大概是和一般程序員思維最大的不同之處吧
徑向漸變一直以來的兼容性問題要比圓角大的多，每種瀏覽器內(nèi)核的寫法都不盡相同，雖然目前都基本支持標(biāo)準(zhǔn)寫法了，但平時的項(xiàng)目還是要注意一些。實(shí)在是兼容性要求，那只能用圖片代替了，誰叫客戶第一呢

總結(jié)

以上是生活随笔為你收集整理的用纯css来实现一个优惠券的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。