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