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の線だけはみ出るように上に設置

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選