WELLCOME BACK
H
ello guys. How are you all? I hope you are all well. I came again with a post. Let’s go..
Code 11
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--b: 2em; /* base */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:top 100%:bottom) */
--r: 1.2em; /* the radius */
padding: 1em;
border-radius: var(--r)/var(--r) min(var(--r),var(--p) - var(--b)/2) min(var(--r),100% - var(--p) - var(--b)/2) var(--r);
background: 0/calc(100% + var(--h)) 100%
linear-gradient(45deg,#490A3D,#F8CA00); /* the gradient */
position: relative;
z-index: 0;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0 calc(-1*var(--h)) 0 0;
background-image: inherit;
clip-path: polygon(calc(99% - var(--h)) max(0%,var(--p) - var(--b)/2),100% var(--p),calc(99% - var(--h)) min(100%,var(--p) + var(--b)/2),50% 50%);
}
Example:
Code 12
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--b: 2em; /* base */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:top 100%:bottom) */
--r: 1.2em; /* the radius */
padding: 1em;
border-radius: var(--r)/min(var(--r),var(--p) - var(--b)/2) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2);
background: 100%/calc(100% + var(--h)) 100%
linear-gradient(-45deg,#5E412F,#78C0A8); /* the gradient */
position: relative;
z-index: 0;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0 0 0 calc(-1*var(--h));
background-image: inherit;
clip-path: polygon(var(--h) max(0%,var(--p) - var(--b)/2),0 var(--p),var(--h) min(100%,var(--p) + var(--b)/2),50% 50%);
}
Example:
Code 13
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:left 100%:right) */
--b: 5px; /* border width */
padding: 1em;
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 100%,
var(--p) calc(100% + var(--h)),
max(0% ,var(--p) - var(--h)*tan(var(--a)/2)) 100%);
border-image: fill 0//var(--h) 0
conic-gradient(#5E412F 0 0); /* the border color */
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: var(--b) 0;
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) 100%,
var(--p) calc(100% + var(--h) + var(--b)*(1 - 1/sin(var(--a)/2))),
max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) 100%);
border-image: fill 0/0 var(--b)/var(--h) 0
conic-gradient(#4ECDC4 0 0); /* the background color */
}
Example:
Code 14
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:left 100%:right) */
--b: 5px; /* border width */
padding: 1em;
clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 0,
var(--p) calc(-1*var(--h)),
max(0% ,var(--p) - var(--h)*tan(var(--a)/2)) 0);
border-image: fill 0//var(--h) 0
conic-gradient(#5E412F 0 0); /* the border color */
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: var(--b) 0;
clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) 0,
var(--p) calc(-1*var(--h) - var(--b)*(1 - 1/sin(var(--a)/2))),
max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) 0);
border-image: fill 0/0 var(--b)/var(--h) 0
conic-gradient(#eb6841 0 0); /* the background color */
}
Example:
Code 15
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:top 100%:bottom) */
--b: 5px; /* border width */
padding: 1em;
clip-path: polygon(100% 100%,0 100%,0 0,100% 0,
100% max(0% ,var(--p) - var(--h)*tan(var(--a)/2)),
calc(100% + var(--h)) var(--p),
100% min(100%,var(--p) + var(--h)*tan(var(--a)/2)));
border-image: fill 0//0 var(--h)
conic-gradient(#18173b 0 0); /* the border color */
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0 var(--b);
clip-path: polygon(100% 100%,0 100%,0 0,100% 0,
100% max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)),
calc(100% + var(--h) + var(--b)*(1 - 1/sin(var(--a)/2))) var(--p),
100% min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)));
border-image: fill 0/var(--b) 0/0 var(--h)
conic-gradient(#79bd9a 0 0); /* the background color */
}
Example:
Code 16
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:top 100%:bottom) */
--b: 5px; /* border width */
padding: 1em;
clip-path: polygon(0 100%,100% 100%,100% 0,0 0,
0 max(0% ,var(--p) - var(--h)*tan(var(--a)/2)),
calc(-1*var(--h)) var(--p),
0 min(100%,var(--p) + var(--h)*tan(var(--a)/2)));
border-image: fill 0//0 var(--h)
conic-gradient(#18173b 0 0); /* the border color */
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0 var(--b);
clip-path: polygon(0 100%,100% 100%,100% 0,0 0,
0 max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)),
calc(-1*var(--h) - var(--b)*(1 - 1/sin(var(--a)/2))) var(--p),
0 min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)));
border-image: fill 0/var(--b) 0/0 var(--h)
conic-gradient(#cf9d38 0 0); /* the background color */
}
Example:
Code 17
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:left 100%:right) */
--r: 1.2em; /* the radius */
--b: 5px; /* border width */
--c1: #0D6759;
--c2: #F02475;
padding: 1em;
border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--h)*tan(var(--a)/2)) min(var(--r),var(--p) - var(--h)*tan(var(--a)/2))/var(--r);
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 100%,
var(--p) calc(100% + var(--h)),
max(0% ,var(--p) - var(--h)*tan(var(--a)/2)) 100%);
background: var(--c1);
border-image: conic-gradient(var(--c1) 0 0) fill 0/
var(--r) max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) 0 max(0%,var(--p) - var(--h)*tan(var(--a)/2))/0 0 var(--h) 0;
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: var(--b);
border-radius: inherit;
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) calc(100% - var(--b)),
var(--p) calc(100% + var(--h) - var(--b)/sin(var(--a)/2)),
max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) calc(100% - var(--b)));
background: var(--c2) content-box;
border-image: conic-gradient(var(--c2) 0 0) fill 0/
var(--r) max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) 0 max(var(--b),var(--p) - var(--h)*tan(var(--a)/2))/0 0 var(--h) 0;
}
Example:
Code 18
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:left 100%:right) */
--r: 1.2em; /* the radius */
--b: 5px; /* border width */
--c1: #0D6759;
--c2: #FA2A00;
padding: 1em;
border-radius: min(var(--r),var(--p) - var(--h)*tan(var(--a)/2)) min(var(--r),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r) var(--r)/var(--r);
clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 0,
var(--p) calc(-1*var(--h)),
max(0% ,var(--p) - var(--h)*tan(var(--a)/2)) 0);
background: var(--c1);
border-image: conic-gradient(var(--c1) 0 0) fill 0/
0 max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(0%,var(--p) - var(--h)*tan(var(--a)/2))/var(--h) 0 0 0;
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: var(--b);
border-radius: inherit;
clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) var(--b),
var(--p) calc(var(--b)/sin(var(--a)/2) - var(--h)),
max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) var(--b));
background: var(--c2) content-box;
border-image: conic-gradient(var(--c2) 0 0) fill 0/
0 max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(var(--b),var(--p) - var(--h)*tan(var(--a)/2))/var(--h) 0 0 0;
}
Example:
Code 19
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:left 100%:right) */
--r: 1.2em; /* the radius */
--b: 5px; /* border width */
--c1: #0D6759;
--c2: #86B8B1;
padding: 1em;
border-radius: var(--r)/min(var(--r),var(--p) - var(--h)*tan(var(--a)/2)) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--h)*tan(var(--a)/2));
clip-path: polygon(0 0,100% 0,100% 100%,0 100%,
0 min(100%,var(--p) + var(--h)*tan(var(--a)/2)),
calc(-1*var(--h)) var(--p),
0 max(0% ,var(--p) - var(--h)*tan(var(--a)/2)));
background: var(--c1);
border-image: conic-gradient(var(--c1) 0 0) fill 0/
max(0%,var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: var(--b);
border-radius: inherit;
clip-path: polygon(0 0,100% 0,100% 100%,0 100%,
var(--b) min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)),
calc(var(--b)/sin(var(--a)/2) - var(--h)) var(--p),
var(--b) max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)));
background: var(--c2) content-box;
border-image: conic-gradient(var(--c2) 0 0) fill 0/
max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
}
Example:
Code 20
.tooltip {
color: #fff;
font-size: 18px;
max-width: 28ch;
text-align: center;
}
.tooltip {
/* triangle dimension */
--a: 90deg; /* angle */
--h: 1em; /* height */
--p: 50%; /* triangle position (0%:left 100%:right) */
--b: 5px; /* border width */
padding: 1em;
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 100%,
var(--p) calc(100% + var(--h)),
max(0% ,var(--p) - var(--h)*tan(var(--a)/2)) 100%);
border-image: fill 0//0 0 var(--h) 0
repeating-linear-gradient(45deg,#5E412F 0 8px,#ccc 0 16px); /* the border gradient */
position: relative;
}
.tooltip:before {
content: "";
position: absolute;
z-index: -1;
inset: var(--b) 0;
clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) 100%,
var(--p) calc(100% + var(--h) + var(--b)*(1 - 1/sin(var(--a)/2))),
max( var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) 100%);
border-image: fill 0/0 var(--b)/0 0 var(--h) 0
linear-gradient(60deg,#CC333F,#79BD9A); /* the background gradient */
}
Example:
তো আজ এই পর্যন্তই। পরের পর্বের জন্য অপেক্ষায় থাকুন।
THE END
S
o friends, that’s it for today. See you in another post. If you like the post then like and comment. Stay tuned to Trickbd.com for any updates.
