CSS クーポン/紙を円でくり抜く デザインテンプレート 3選

紙を円で切り抜いたようなクーポン用紙をCSSのデザインと作り方を紹介します。

1. 角をくり抜いたクーポン

See the Pen
css coupon
by kura (@kuranopen)
on CodePen.

4角をくり抜いたようなクーポン。

HTML

<div class="coupon">
  <div class="coupon-inner">
    <div class="price">500円</div>
    <div class="date">有効期限:2012年12月31日</div>
  </div>
</div>

CSS

/* layout css */

.coupon {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  max-width: 620px;
  background: #FFF;
  padding: 40px 20px;
}
.price {
  font-size: 30px;
  font-weight: 900;
  color: #f56359;
  text-align: center;
}
.date {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

/* circle-css */

.coupon::before,
.coupon::after {
  position: absolute;
  display: block;
  content: "";
  border-radius: 100%;
  background: #e0e6ef;
  left: -15px;
  width: 30px;
  height: 30px;
}
.coupon::before {
  top: -15px;
}
.coupon::after {
  bottom: -15px;
}
.coupon-inner::before,
.coupon-inner::after {
  position: absolute;
  display: block;
  content: "";
  border-radius: 100%;
  background: #e0e6ef;
  right: -15px;
  width: 30px;
  height: 30px;
}
.coupon-inner::before {
  top: -15px;
}
.coupon-inner::after {
  bottom: -15px;
}
  • /* circle-css */がくり抜きに必要なCSSです。残りはデザイン用CSSです
  • .coupon::before .coupon::afterを背景色と同じ円形に指定し、左の2角に設置
  • .coupon-inner::before .coupon-inner::afterも同じく背景色と同じ円形に指定し、右の2角に設置

2. 用紙の間をくり抜いたクーポン

See the Pen
css coupon
by kura (@kuranopen)
on CodePen.

HTML

<div class="coupon">
    <div class="left">
        <div class="price">500円</div>
    </div>
    <div class="right">
          <div class="date">有効期限<br>2012年12月31日</div>
    </div>
</div>

CSS

/* layout css */

.coupon {
  display: flex;
  width: 100%;
  max-width: 620px;
  background: #FFF;
}
.price {
  font-size: 30px;
  font-weight: 900;
  color: #f56359;
}
.date {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.left {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 40px 20px;
}
.right {
  position: relative;
  display: flex;
  width: 160px;
  padding: 40px 20px;
  border-left: 2px dashed #e0e6ef;
  justify-content: center;
}

/* circle-css */

.right::before,
.right::after {
  position: absolute;
  display: block;
  content: "";
  border-radius: 100%;
  background: #e0e6ef;
  left: -12px;
  width: 22px;
  height: 22px;
}
.right::before {
  top: -11px;
}
.right::after {
  bottom: -11px;
}
  • /* circle-css */がくり抜きに必要なCSSです。残りはデザイン用CSSです
  • .right::before .right::afterを背景色と同じ円形に指定し、.rightの左に設置

2. 用紙の間をくり抜いたクーポン(線付き)

See the Pen
css coupon
by kura (@kuranopen)
on CodePen.

HTML

<div class="coupon">
    <div class="left">
        <div class="price">500円</div>
    </div>
    <div class="right">
        <div class="right-inner">
            <div class="date">有効期限<br>2012年12月31日</div>
        </div>
    </div>
</div>

CSS

/* layout css */

.coupon {
  display: flex;
  border: 2px solid #333;
  width: 100%;
  max-width: 620px;
  background: #fff;
}
.price {
  font-size: 30px;
  font-weight: 900;
  color: #f56359;
}
.date {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.left {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 40px 20px;
}
.right {
  position: relative;
  display: flex;
  width: 160px;
  padding: 40px 20px;
  border-left: 2px dashed #333;
  justify-content: center;
}
.right-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* circle-css */

.right::before,
.right::after {
  position: absolute;
  border: 2px solid #333;
  display: block;
  content: "";
  border-radius: 100%;
  background: #e0e6ef;
  box-sizing: border-box;
  left: -12px;
  width: 22px;
  height: 22px;
}
.right::before {
  top: -11px;
}
.right::after {
  bottom: -11px;
}
.right-inner::before,
.right-inner::after {
  position: absolute;
  display: block;
  content: "";
  border-radius: 100%;
  background: #e0e6ef;
  z-index: 1;
  width: 24px;
  height: 24px;
  left: -13px;
}
.right-inner::before {
  top: -19px;
}
.right-inner::after {
  bottom: -19px;
}
  • /* circle-css */がくり抜きに必要なCSSです。残りはデザイン用CSSです
  • .right::before .right::afterを背景色と同じ円形に指定し、.rightの左に設置
  • .right-inner::before .right-inner::after.right::before .right::afterの線だけはみ出るように上に設置

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。