<div class="tooltip bottom">
Chocolate shortbread gummi bears cupcake chupa chups. Jelly-o halvah gummi bears bonbon cookie cheesecake
</div>
<div class="tooltip top" style="--p: 20%;--w:60px;--h: 30px">
Chocolate shortbread gummi bears cupcake chupa chups. Jelly-o halvah gummi bears bonbon cookie cheesecake
</div>
<div class="tooltip left" style="--p: 80%;--w:20px;--h: 30px">
Chocolate shortbread gummi bears cupcake chupa chups. Jelly-o halvah gummi bears bonbon cookie cheesecake
</div>
<div class="tooltip right" style="--p: 20%;--w:30px;--h: 40px">
Chocolate shortbread gummi bears cupcake chupa chups. Jelly-o halvah gummi bears bonbon cookie cheesecake
</div>
.tooltip {
--h: 20px;
--w: 40px;
--p: 50%;
width: 200px;
display: inline-block;
margin: 15px;
font-size: 18px;
background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
color: #fff;
padding: 20px;
}
.bottom {
border-bottom: var(--h) solid #0000;
clip-path:
polygon(0 0,100% 0, /* [1],[2] */
100% calc(100% - var(--h)), /* [3] */
calc(var(--p) - var(--w)/2) calc(100% - var(--h)), /* [4] */
var(--p) 100%, /* [5] */
calc(var(--p) + var(--w)/2) calc(100% - var(--h)), /* [6] */
0 calc(100% - var(--h)) /* [7] */
);
}
.top {
border-top: var(--h) solid #0000;
clip-path:
polygon(
0 var(--h),
calc(var(--p) - var(--w)/2) var(--h),
var(--p) 0,
calc(var(--p) + var(--w)/2) var(--h),
100% var(--h),
100% 100%,0 100%
);
}
.left {
border-left: var(--w) solid #0000;
clip-path:
polygon(
100% 0,100% 100%,
var(--w) 100%,
var(--w) calc(var(--p) - var(--h)/2),
0 var(--p),
var(--w) calc(var(--p) + var(--h)/2),
var(--w) 0
);
}
.right {
border-right: var(--w) solid #0000;
clip-path:
polygon(
0 100%,0 0,
calc(100% - var(--w)) 0,
calc(100% - var(--w)) calc(var(--p) - var(--h)/2),
100% var(--p),
calc(100% - var(--w)) calc(var(--p) + var(--h)/2),
calc(100% - var(--w)) 100%
);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.