Maison >interface Web >tutoriel CSS >Comment obtenir un bord incliné sur une division à l'aide d'un pseudo-élément asymétrique ?
Réaliser un bord incliné sur un div à l'aide de CSS peut être un défi, surtout lorsque l'on vise un solution réactive. Ce sujet a déjà été abordé, mais explorons une approche alternative.
Pour créer un arrière-plan incliné, nous pouvons utiliser un pseudo-élément asymétrique. Cela nous permet de garder le texte non affecté par la propriété transform.
La propriété transform origin positionne l'inclinaison du pseudo-élément à partir du coin inférieur droit, tandis que overflow:hidden; cache les sections débordantes. Enfin, un z-index négatif place le pseudo-élément derrière le contenu du div.
div { position: relative; display: inline-block; padding: 1em 5em 1em 1em; overflow: hidden; color: #fff; } div:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg); transform: skew(-45deg); z-index: -1; } body { background: url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg'); background-size: cover; }
<div>slanted div text</div> <div> slanted div text<br/> on several lines<br/> an other line </div> <div>wider slanted div text with more text inside</div>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!