Pour obtenir un effet visuellement saisissant, il est parfois souhaitable d'introduire un coin incliné dans une boîte CSS. Cela peut transformer instantanément un simple rectangle en un élément dynamique et accrocheur.
Pour les navigateurs prenant en charge CSS3, la propriété polygone offre une solution puissante pour ce défi. . Cependant, pour une compatibilité plus large avec les navigateurs, la technique Slantastic (http://meyerweb.com/eric/css/edge/slantastic/demo.html) peut être une meilleure alternative.
HTML :
<div class="cornered"></div> <div class="main">Hello</div>
CSS :
.cornered { width: 160px; height: 0px; border-bottom: 40px solid red; border-right: 40px solid white; } .main { width: 200px; height: 200px; background-color: red; }
Pour créer un coin avec des bordures transparentes et du texte, vous pouvez implémenter l'approche alternative suivante :
HTML :
<div class="outer"> <div class="cornered">It's possible to put text up here, too... </div> <div class="main">Hello hello hello hello hello hello hello hello hello</div> </div>
CSS :
.outer { background-color: #ccffff; padding: 10px; font-size: x-small; } .cornered { width: 176px; height: 0px; border-bottom: 40px solid red; border-left: 40px solid transparent; } .main { width: 200px; height: 200px; background-color: red; padding: 0 8px; }
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!