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...
Know For Shareing