<div class="ticket1">
<div class="ticket1__shape">
<div class="top"></div>
<div class="rip"></div>
<div class="bottom"></div>
</div>
<div class="ticket1__content">
<header class="ticket1__header">ticket1 name here</header>
</div>
</div>
<div class="ticket2">
<header class="ticket2__header">Ticket2 Header</header>
<div class="ticket2__rip"></div>
<div class="ticket2__body">Ticket2 Body Content</div>
</div>
<div class="ticket3">
<div class="ticket3__details">
<h3 class="ticket3__title">General Details</h3>
<ul>
<li>Location: 21 street</li>
<li>Tickets No. : 120</li>
<li>Earnings: 500$</li>
</ul>
</div>
<div class="ticket3__rip"></div>
<div class="ticket3__price">
<span class="heading">Price</span>
<span class="price">100$</span>
</div>
</div>
* {
box-sizing: border-box;
}
body {
background-color: lightblue;
}
.ticket1 {
position: relative;
width: 700px;
height: 150px;
margin: 100px;
&__shape {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.15));
.top,
.bottom {
flex: 1;
width: 100%;
background-color: #fff;
}
.top {
border-radius: 5px 5px 0 0;
}
.bottom {
border-radius: 0 0 5px 5px;
}
.rip {
position: relative;
height: 40px;
flex-shrink: 0;
margin: 0 20px;
background-color: #fff;
&::before,
&::after {
position: absolute;
content: "";
width: 40px;
height: 40px;
border: 10px solid transparent;
border-top-color: #fff;
border-right-color: #fff;
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 50%;
top: 50%;
}
&::before {
left: -20px;
}
&::after {
right: -80px;
transform: translate(-50%, -50%) rotate(225deg);
}
}
}
&__content {
position: relative;
z-index: 1;
padding: 1rem;
}
}
.ticket2 {
position: relative;
display: flex;
flex-direction: column;
width: 700px;
margin: 100px;
filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.15));
&__header {
position: relative;
background-color: #fff;
padding: 1rem;
padding-bottom: 0;
font-size: 1.2rem;
font-weight: 600;
border-radius: 5px 5px 0 0;
&::after {
position: absolute;
content: "";
height: 1px;
border-top: 2px dashed #eee;
left: 20px;
right: 20px;
bottom: -20px;
z-index: 2;
}
}
&__rip {
position: relative;
height: 40px;
flex-shrink: 0;
margin: 0 20px;
background-color: #fff;
&::before,
&::after {
position: absolute;
content: "";
width: 40px;
height: 40px;
border: 10px solid transparent;
border-top-color: #fff;
border-right-color: #fff;
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 50%;
top: 50%;
}
&::before {
left: -20px;
}
&::after {
right: -80px;
transform: translate(-50%, -50%) rotate(225deg);
}
}
&__body {
background-color: #fff;
padding: 1rem;
border-radius: 0 0 5px 5px;
padding-top: 2rem;
}
}
$price_bg: #E91E63;
$rip_cut_size: 20px;
$rip_border_size: $rip_cut_size / 4;
.ticket3 {
position: relative;
display: flex;
flex-direction: row;
width: 700px;
margin: 100px;
filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.15));
&__details {
flex: 3;
background-color: #fff;
min-height: 150px;
padding: 1rem;
border-radius: 5px 0 0 5px;
.ticket3__title {
margin-top: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
li {
margin: .7rem 0;
}
}
}
&__rip {
position: relative;
background-color: #fff;
background-image: linear-gradient(90deg, #fff 49%, $price_bg 50%);
margin: ($rip_cut_size / 2) 0;
width: $rip_cut_size;
&::before,
&::after {
position: absolute;
content: "";
width: $rip_cut_size;
height: $rip_cut_size;
border: $rip_border_size solid transparent;
border-top-color: #fff;
left: 50%;
transform: translateX(-50%) rotate(135deg);
border-radius: 50%;
}
&::before {
top: - ( $rip_cut_size + $rip_border_size );
border-top-color: $price_bg;
border-right-color: #fff;
}
&::after {
border-right-color: $price_bg;
border-top-color: #fff;
bottom: - ( $rip_cut_size + $rip_border_size );
transform: translateX(-50%) rotate(-45deg);
}
}
&__price {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
background-color: $price_bg;
min-height: 150px;
padding: 1rem;
border-radius: 0 5px 5px 0;
color: #fff;
.heading {
font-size: 1rem;
margin-bottom: .6rem;
color: #ffcdde;
margin-left: -5px;
}
.price {
font-size: 2rem;
font-weight: bold;
margin-left: -5px;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.