Maison > interface Web > tutoriel CSS > Comment créer un coin incliné dans une boîte CSS ?

Comment créer un coin incliné dans une boîte CSS ?

Barbara Streisand
Libérer: 2024-11-01 23:12:29
original
240 Les gens l'ont consulté

How to Create a Slanted Corner in a CSS Box?

Application d'un coin incliné à une boîte CSS

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.

Création d'une boîte à coins coupés

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.

Implémentation de Slantastic

HTML :

<div class="cornered"></div>
<div class="main">Hello</div>
Copier après la connexion

CSS :

.cornered {
    width: 160px;
    height: 0px;
    border-bottom: 40px solid red;
    border-right: 40px solid white;
}

.main {
    width: 200px;
    height: 200px;
    background-color: red;
}
Copier après la connexion

Options supplémentaires

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>
Copier après la connexion

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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal