Dernière mise à jour : juin 2022
Votre navigateur ne prend pas en charge cette démonstration.
CSS HOUDINI
CSS HOUDINI
Le code :
<div class="infobulle">CSS HOUDINI</div>
.infobulle {
margin:2rem auto;
width: 200px;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
background-color: #6753ea;
color: white;
border-bottom:1px solid transparent;
border-top:1px solid transparent;
border-image-source: paint(infobulle);
border-image-slice: 0 0 100% 0;
border-image-width: var(--taille-bordure);
border-image-outset: var(--taille-bordure);
--tooltip-position: 50%;
--tooltip-size: 20px;
--taille-bordure: 20px
}
CSS.paintWorklet.addModule('js.js');
// module js.js
registerPaint('infobulle', class {
static get inputProperties() {
return [
'background-color',
'--tooltip-position',
'--tooltip-size'
];
}
paint(ctx, geom, props, args) {
const color = props.get('background-color').toString()
const positionPercent = props.get('--tooltip-position').toString().replace('%', '') * 1
const position = geom.width * positionPercent / 100
const size = props.get('--tooltip-size').toString().replace('px', '') * 1
ctx.beginPath();
ctx.moveTo(position - size, 0);
ctx.lineTo(position + size, 0);
ctx.lineTo(position, geom.height);
ctx.closePath();
// fill
ctx.fillStyle = color;
ctx.fill();
}
})
;