Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
corner-top-shape
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental:Il s'agit d'unetechnologie expérimentale.
Vérifiez attentivement letableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriétéCSScorner-top-shape définit la forme des deux coins sur le bord supérieur d'une boîte, à l'intérieur de leur zoneborder-radius.
Pour une description complète du comportement des formes de coins et plusieurs exemples, consultez la page de la propriété raccourciecorner-shape.
Propriétés constitutives
La propriétécorner-top-shape est une forme raccourcie pour les propriétés physiques suivantes :
Syntaxe
/* Valeur unique par mot-clé pour les deux coins */corner-top-shape: notch;corner-top-shape: squircle;/* Valeur unique superellipse() pour les deux coins */corner-top-shape: superellipse(3);corner-top-shape: superellipse(-1.5);/* Coin gauche, coin droit */corner-top-shape: notch squircle;corner-top-shape: notch superellipse(-1.5);/* Valeurs globales */corner-top-shape: inherit;corner-top-shape: initial;corner-top-shape: revert;corner-top-shape: revert-layer;corner-top-shape: unset;Valeurs
La propriétécorner-top-shape se définit avec une ou deux valeurs<corner-shape-value> :
- Siune valeur est utilisée, elle définit la forme desdeux coins supérieurs.
- Sideux valeurs sont utilisées, la première définit la forme ducoin supérieur gauche, et la seconde définit la forme ducoin supérieur droit.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à::first-letter. |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie : |
Syntaxe formelle
corner-top-shape =
<'corner-top-left-shape'>{1,2}
<corner-top-left-shape> =
<corner-shape-value>
<corner-shape-value> =
round|
scoop|
bevel|
notch|
square|
squircle|
<superellipse()>
<superellipse()> =
superellipse(<number>|
infinity|
-infinity)
Exemples
Vous pouvez trouver d'autres exemples liés sur la page de référencecorner-shape.
Utilisation simple decorner-top-shape
HTML
Le balisage de cet exemple contient un seul élément HTML<div>.
<div></div>CSS
Nous appliquons à la boîte quelques styles de base, qui sont masqués ici pour plus de clarté. Nous appliquons aussi unbox-shadow, unborder-radius de 60 pixels, et uncorner-top-shape descoop notch.
body { font-family: "Helvetica", "Arial", sans-serif; width: 240px; margin: 20px auto;}div { width: 100%; height: 180px; display: flex; justify-content: center; align-items: center; background-color: goldenrod; background-image: linear-gradient( to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.5) );}div { box-shadow: 1px 1px 3px gray; border-radius: 60px; corner-top-shape: scoop notch;}Résultat
Le résultat affiché ressemble à ceci :
Spécifications
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-top-shape |
Compatibilité des navigateurs
Voir aussi
- La propriété raccourcie
corner-shape - Les propriétés
corner-bottom-shape,corner-left-shapeetcorner-right-shape - Les propriétés
corner-block-start-shape,corner-block-end-shape,corner-inline-start-shapeetcorner-inline-end-shape - La propriété raccourcie
border-radius - Les propriétés
border-top-left-radiusetborder-top-right-radius - Le moduledes bordures et décorations de boîte CSS
- Le moduledes arrière-plans et bordures CSS