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

前言

我們在平時的網頁中，經常會見到這樣的優惠券或者其他的券（特征就是會有反方向的圓角）。

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

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

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

思路

我們先實現大致的框架，左右兩部分

<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>

下面就來實現中間看著比較復雜的"凹槽"部分

我能想到跟圓角相關的有圓角、圓形、徑向...這些吧

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

1.圓角

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

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

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

2.圓形

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

假設我們現在有一個圓，它本身沒有顏色，但是它有一個黑色的邊框

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

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

這不就是我們需要的嗎？

現在我們用css來實現

根據上面的分析，我們背景的顏色應該是圓的邊框的顏色，所以原背景要去掉

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

這樣就實現了一個凹槽。

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

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

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

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

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

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

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

這樣就完美的實現了兩個凹槽，右邊的原理同樣，下面是完整的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.徑向漸變

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

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

那么怎樣實現我們要的效果呢

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

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

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

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

現在把這個空心圓移到邊緣

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

現在就是如何做出兩個凹槽的問題

我們有兩種方式，一種是和上面的一樣，用兩個偽元素拼接而成，第二種就是直接利用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) }

我們可以繼續拼接，可能可以實現我們想要的效果

現在來說說第一種方法

我們把代碼放入我們的例子當中

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

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

下面是codepen演示

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

小節

相比于用圓形來實現，這種徑向漸變更方便擴展，寫起來也容易。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。