summaryrefslogtreecommitdiffstats
path: root/layout/docs/css-gap-decorations/examples/flexbox-coupon-rule.html
blob: 505ad756ddea90de18621a883194fc6b422585b9 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <title>Coupon example</title>
  <style>
  div {
    display: inline-flex;
    column-gap: .8em;
    column-rule: 12px solid;
    column-rule-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVCAYAAAByrA%2B0AAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACEklEQVQ4y5WTsUtbURTGf%2Bf1vrwY2ywWQeMgTi4OXf0fwhtLwTFChg4Kzi7OnSwiyKNQFMxSKRQ62HRw0D4c%2Bi%2FIGywlItZEE1%2BS93VoElpoK35w4HLvOd853zn3IOmjpK7ux62k2Ov3%2B28BA8T%2F8QN4Q5IkTyW9ltSTlP2DvSnpHQBbW1tBo9GYkVSTdCWpPQjuD84NSbuSxgG8IAjY3t7%2BbmbPJb2U9AmoA5%2BBD0DZzJbM7EYSDmB6etrb29vLe563C%2Bz%2BTYAkzAxveNHpdBRFkb%2Bzs%2BMnSeJL8jY3N0fvZgbAozAM3S8CZWamSqXSc875p6en3traWg%2FAOUeWZQA4IAOyubm5rNlsusvLy%2FEgCB63220rl8s3x8fHt9VqNR1mckA2Pz%2Bv1dVVxXHsAzPAs0KhwMTExFfnXOL7ftrtdgHwAC0uLmplZcUDAmAWCAc2WywWg42NDTfM4A0nHMcxwB1wBrwf2Nn19fVdmqbZqF1RFNn%2B%2Fr5J4vDw0Jf0RNKUpKmLi4viwcGBn8vl%2BF0DrVaLWq3GyclJVq%2FX22EY3kri6OhIaZqSpumfAWZGq9ViYWGhX6lUKBQKDtD6%2BnoGkM%2Fn6XQ6Iw05IDc2NpY3M6IoolQq9UqlUn9Q8sgZwKIoCs7Pz7PJycnu8vLyEvDczHIDsivgVRAEX0ZlPfS3Pnwfer3ei3uch%2FgmqcpDd%2Fonp%2B72kBTcCEsAAAAASUVORK5CYII%3D) 6 round;
    font-size: large;
    padding: 0 .5em;
    border-radius: 0.2em;
    min-block-size: 3em;
    align-items: center;
    background-image: linear-gradient(270deg, #FFA329 3%, #F56C34);
    color: #fff;
  }
  </style>
</head>

<div><x>满 100</x><x>减 20</x></div>