<span class="arrow-simple-1"></span>
.arrow-simple-1 {
$size: 15px;
$color: #2196f3;
&:after {
content: "";
width: 0;
height: 0;
display: block;
border: $size solid transparent;
// top
// border-bottom-color: $color;
// bottom
// border-top-color: $color;
// left
// border-right-color: $color;
// right
border-left-color: $color;
transition: all .3s ease;
}
// optional
&:hover:after {
transition: all .3s ease;
border-left-color: darken($color, 15%);
}
}
<span class="arrow-simple-2"></span>
.arrow-simple-2 {
$size: 20px;
$color: #2196f3;
display: block;
width: $size;
height: $size;
position: relative;
border-top: $size/10 solid $color;
border-left: $size/10 solid $color;
transition: all .3s ease;
// top
transform: rotate(45deg);
// bottom
transform: rotate(-135deg);
// left
transform: rotate(-45deg);
// right
transform: rotate(135deg);
// optional
&:hover {
transition: all .3s ease;
border-top: $size/10 solid darken($color, 15%);
border-left: $size/10 solid darken($color, 15%);
}
}
<span class="arrow-rounded"></span>
.arrow-rounded {
$size: 20px;
$color: #2196f3;
display: block;
width: $size;
height: $size;
// bottom
// transform: rotate(90deg);
// top
// transform: rotate(-90deg);
&:before,
&:after {
content: "";
display: block;
width: $size;
height: $size/5;
box-sizing: border-box;
border-radius: $size/5;
background: $color;
transition: all .3s ease;
position: relative;
top: $size/4;
}
// left
&:before {
transform-origin: 0%;
transform: rotate(-45deg) translate(0, $size/4.5);
}
&:after {
transform-origin: 100%;
transform: rotate(45deg) translate($size/3.5, $size/2);
}
// right
&:before {
transform-origin: 100%;
transform: rotate(45deg) translate(0, $size/4.5);
}
&:after {
transform-origin: 100%;
transform: rotate(-45deg) translate(0, -$size/4.5);
}
// optional
&:hover:before,
&:hover:after {
transition: all .3s ease;
background: darken($color, 15%);
}
}
<span class="arrow-circle"></span>
.arrow-circle {
$size: 30px;
$color: #2196f3;
display: block;
width: $size;
height: $size;
position: relative;
border-radius: $size;
border: $size/10 solid $color;
box-sizing: border-box;
transition: all .3s ease;
&:after {
content: "";
display: block;
width: $size/3;
height: $size/3;
transition: all .3s ease;
border-top: $size/10 solid $color;
border-left: $size/10 solid $color;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
margin-top: -$size/6;
margin-left: -$size/6;
// top
// transform: rotate(45deg);
// margin-top: -$size/13;
// bottom
// transform: rotate(-135deg);
// margin-top: -$size/4.5;
// left
// transform: rotate(-45deg);
// margin-left: -$size/8;
// right
margin-left: -$size/4.5;
transform: rotate(135deg);
}
// optional
&:hover {
transition: all .3s ease;
border-color: darken($color, 15%);
&:after {
transition: all .3s ease;
border-top-color: darken($color, 15%);
border-left-color: darken($color, 15%);
}
}
}
<span class="label-simple">-50%</span>
.label-simple {
$size: 30px;
$color: #2196f3;
background: $color;
width: $size*2;
height: $size;
position: relative;
display: block;
// optional
border-top-left-radius: $size/5;
border-bottom-left-radius: $size/5;
color: white;
font-size: $size/1.5;
line-height: $size;
text-align: center;
&:before {
content: "";
border: $size/2 solid transparent;
top: 0;
position: absolute;
// left
// left: -$size;
// border-right-color: $color;
// right
right: -$size;
border-left-color: $color;
}
}
<span class="label-with-circle">-50%</span>
.label-with-circle {
$size: 30px;
$color: #2196f3;
background: $color;
width: $size*2;
height: $size;
position: relative;
display: block;
// optional
border-top-left-radius: $size/5;
border-bottom-left-radius: $size/5;
color: white;
font-size: $size/1.5;
line-height: $size;
text-align: center;
&:before {
content: "";
border: $size/2 solid transparent;
top: 0;
position: absolute;
// left
// left: -$size;
// border-right-color: $color;
// right
right: -$size;
border-left-color: $color;
}
&:after {
content: "";
display: block;
width: $size/6;
height: $size/6;
border-radius: 100%;
background: white;
position: absolute;
top: 50%;
margin-top: -$size/12;
// left
// left: -$size/12;
// right
right: -$size/12;
}
}
<span class="flag-1">-50%</span>
.flag-1 {
$color: #2196f3;
$size: 40px;
color: white;
line-height: $size*1.2;
text-align: center;
font-size: $size/2.5;
font-weight: bold;
background: $color;
display: block;
width: $size;
position: absolute;
top: 0;
right: $size/2;
&:before {
content: "";
border: $size/2 solid transparent;
border-top-color: $color;
position: absolute;
left: 0;
bottom: -$size;
}
}
<span class="flag-1-plus"><span></span>-50%</span>
.flag-1-plus {
$color: #2196f3;
$size: 40px;
color: white;
line-height: $size*1.2;
text-align: center;
font-size: $size/2.5;
font-weight: bold;
background: $color;
display: block;
width: $size;
position: absolute;
top: 0;
right: $size/2;
// flag top
span {
$size-top: $size/4;
display: block;
width: $size + $size-top;
height: $size-top;
position: absolute;
top: -$size-top;
background: $color;
border-top-left-radius: $size;
border-top-right-radius: $size/2;
&:before {
content: "";
display: block;
width: $size-top;
height: $size-top;
background: darken($color, 10%);
position: absolute;
top: 0;
right: 0;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
}
}
// arrow bottom
&:after {
content: "";
border: $size/2 solid transparent;
border-top-color: $color;
position: absolute;
left: 0;
bottom: -$size;
}
}
<span class="flag-2">-50%</span>
.flag-2 {
$color: #2196f3;
$size: 40px;
color: white;
line-height: $size*1.2;
text-align: center;
font-size: $size/2.5;
font-weight: bold;
background: $color;
display: block;
width: $size;
position: absolute;
top: 0;
right: $size/2;
&:before,
&:after {
content: "";
display: inline-block;
border: $size/4 solid transparent;
position: absolute;
bottom: -$size/4;
}
&:before {
left: 0;
border-left: $size/2 solid $color;
}
&:after {
right: 0;
border-right: $size/2 solid $color;
}
}
<span class="flag-horizontal">50% de desconto</span>
.flag-horizontal {
$color: #2196f3;
$size: 30px;
font-size: $size/2;
color: white;
line-height: $size;
white-spacing: no-wrap;
display: inline-block;
padding: 0 $size/3;
background: $color;
position: absolute;
top: 5%;
left: -$size/3;
&:before {
content: "";
display: block;
border: $size/5 transparent solid;
border-left-color: darken($color,15%);
position: absolute;
left: 0;
bottom: -$size/2.5;
transform: rotate(-45deg);
transform-origin: 0% 0%;
}
&:after {
content: "";
display: block;
border: $size/2 transparent solid;
border-left-color: $color;
position: absolute;
right: -$size;
top: 0;
}
}
<span class="flag-3">New</span>
.flag-3 {
$color: #2196f3;
$size: 30px;
font-size: $size/2;
color: white;
line-height: $size;
display: block;
position: relative;
width: $size*3;
padding: 0 $size;
background: $color;
&:before,
&:after {
content: "";
display: block;
position: absolute;
border: $size/2 solid transparent;
border-top-color: $color;
border-bottom-color: $color;
top: 0;
}
&:before {
right: -$size/2;
}
&:after {
left: -$size/2;
}
}
<span class="flag-4">New</span>
.flag-4 {
$color: #2196f3;
$size: 44px;
display: block;
width: $size*2;
background: $color;
position: absolute;
top: $size*1.4;
right: 0;
line-height: $size/2;
text-align: center;
text-transform: uppercase;
font-size: $size/2.5;
color: white;
transform-origin: 100% 0%;
transform: rotate(45deg);
&:before,
&:after {
content: "";
display: inline-block;
border: $size/4 solid transparent;
border-bottom-color: $color;
position: absolute;
bottom: 0;
}
&:before {
left: -$size/2;
border-right-color: $color;
}
&:after {
right: -$size/2;
border-left-color: $color;
}
}
<span class="flag-5"></span>
.flag-5 {
$color: #2196f3;
$size: 50px;
&:before,
&:after {
content: "";
display: block;
border: $size/2 solid transparent;
position: absolute;
top: 0;
right: 0;
}
&:before {
top: (-$size/2)-1px;
right: (-$size/2)-1px;
border-top-color: white;
transform: rotate(-135deg);
}
&:after {
top: ($size/5)-1px;
right: ($size/5)-1px;
border-top-color: $color;
transform: rotate(45deg);
}
}