CSS coupons jagged effect

Recently, there is a coupon requirement that needs to generate the sawtooth edge code as follows:

• The effect

• css

coupon { display: flex; flex: 1; &-left { background: linear-gradient( 90deg, rgba(85, 212, 203, 1) 0%, rgba(75, 209, 179, 1) 100% ); border-radius: 8px 0 0 8px; height: 200px; position: relative; width: 250px; &:before { background-image: radial-gradient(#fff 8px, transparent 8px); background-repeat: repeat-y; background-size: 20px 20px; /* Size of a repeat */ content: ''; display: block; height: 100%; left: -12px; position: absolute; top: 0; width: 20px; } } &-right { flex: 1; }}Copy the code

• html

      <div className="coupon">
            <div className="coupon-left">          
            </div>
            <div className="coupon-right"></div>
        </div>

Copy the code