手寫react優惠券元件

由於是截圖，大小有些失真

左邊的鋸齒狀是如何實現

中間的凹陷是如何實現

.sawtooth 

.sawtooth:before, .sawtooth:after 
.sawtooth:before 
.sawtooth:after 

這個就是在開頭和最後畫了乙個點狀邊框，然後平移邊框，讓邊框的一部分覆蓋原來的邊框，利用圓點的顏色和背景色一樣的特點，製作鋸齒效果。如果不平移邊框效果如下：

看了上圖實現原理是不是一目了然了。但這也有一些缺點：

1.鋸齒的顏色必須和背景色一樣

2.無法畫鋸齒朝里的方式

用徑向漸變建立影象。

簡單語法：radial-gradient(circle, red 10px, blue 20px, yellow 30px);

形狀是圓（也可以是橢圓），開始位置的顏色是red，中間顏色是blue，最後顏色是黃色。

10px表示從圓心開始10px範圍內都是紅色；

20px表示距離圓心20px的位置為blue，然後向兩邊擴散，直到裡面10px的紅色區域，和向外30px地方的yellow區域；

30px表示從30px開始往外都是yellow。

這樣乙個帶圓點背景的div就出來了。然後通過設定寬度，只顯示半個圓，左邊的鋸齒就出來了。width設定成10px如下效果

這個實現就比較簡單了，通過絕對定位，用乙個圓形元素覆蓋父元素的邊框。

在實現時遇到乙個問題，就是子元素移動過去了，但是無法覆蓋父元素的邊框。這時，需要在元件外再套一層div，這個div設定成相對定位，然後把圓div設定成相對定義，再移動位置就能覆蓋裡面的元件div了。

通過上述的講解，需要實現優惠卷所需要的知識點就都講完了，下面讓我們來實現開始效果的優惠卷吧。

乙個div頂級容器,設定成相對定位。（解決無法覆蓋問題）

乙個div元件容器，放到上面的div中

鋸齒div（放到2中的的div）

粗體顯示折扣的div（放到2中的的div）

虛線div（放到2中的的div）

折扣詳情div（放到2中的的div）

兩個圓形div，放到1或2中div都可以。

.parentcontainer 

.container 
.left 
.couponname 
.subname 
.topsemicircle 
.bottomsemicircle 
.dashed 
.right 
.desc 
8折    
折扣卷7.5折
400張

根據自己需要再寫成react版本，就易如反掌了。

//less 

.parentcontainer 
.container 
.left 
.leftinvalid 
.couponname 
.couponnameinvalid 
.title 
.invalidtitle 
.subname 
.semicircle 
.topsemicircle 
.bottomsemicircle 
.dashed 
.right 
.desc 
//元件**
import react,  from 'react'
import styles from './index.less'
export default class couponcard extends purecomponent ,
} = this.props
const amounts = data.amount.tostring().split('.')
return (
` : ''}
折扣捲張          )}}

參考鏈

css繪製卡券優惠券 CSS 實現優惠券樣式

本文將介紹如何使用 css 中的 radial gradient 實現如下圖所示的優惠券樣式效果 繪製基本樣式 首先，我們繪製出優惠券的基本樣式，這很簡單，就不多說了。滿 100 減 30 scss voucher width 600px height 200px display flex left...

iOS 繪製優惠券

樣式要求如下 如下,self.leftw為左半塊的寬度self.semicircle為左邊分界線的半圓弧半徑c heigth為控價高度self.radius優惠券圓角半徑 lpath uibezierpath bezierpath 起點 lpath movetopoint cgpointmake s...

小鳥雲優惠券

小鳥雲 是深圳前海小鳥雲計算 旗下的雲計算服務品牌，專注為個人開發者使用者 中小型 大型企業使用者提供一站式核心網路雲端部署服務，促使使用者雲端部署化簡為零，輕鬆快捷運用雲計算。小鳥雲是國內為數不多具有isp idc雙資質的專業雲計算服務商，同時持有系統軟體著作權證書 cnnic位址分配聯盟成員證書...