Je crée un petit motif triangulaire stylisé "avant" mon élément H1, mais je ne suis pas en mesure de faire arrondir les coins arrondis correctement. Le haut à droite va bien, mais les deux autres ont ce problème de coupure.
Voici la sortie avec une image blown de la forme: p>
p>
Le code utilisé est ci-dessous: p>
p>
<h1>Heading</h1>
4 Réponses :
C'est parce que vous arrondissez tout le nœud. Appliquer p> frontière-rayon code> uniquement sur le coin supérieur droit
<h1>Heading</h1>
Ok donc je n'étais pas très clair avec ma question. Mon but de garder tous les coins arrondis. J'aimerais que le haut à gauche et le bas à droite soit parfaitement arrondi semblable à celui du haut à droite.
@RMF Je ne pense pas qu'il y ait une voie directe ( comme une valeur spécifique ) pour le faire. Vous pouvez utiliser un SVG pour le piston de la pince ou vous pouvez définir un polygone beaucoup plus détaillé qui se rapproche de la courbe souhaitée.
Vous pouvez ajouter un style supplémentaire à chaque coin individuel de votre CSS en ajoutant: Vous pouvez modifier ces numéros en fonction de ce dont vous avez besoin. Le premier et le troisième (ceux que j'ai ajoutés 0,4em à côté de) contrôler les coins que vous recherchez, je crois.
Peu importe la valeur que j'ai autour des coins avec, le polygone va toujours clipser cela, ce qui l'a semblé étrange. Avec une valeur plus petite, je suppose qu'il sera légèrement moins perceptible.
Ah je comprends, je pense que je vais descendre la route SVG dans ce cas
Mis à part SVG ou construire manuellement les courbes dans le path code> code>, vous pouvez ajouter un p> : après code> élément pour agir comme une hypoténuse incurvée. Cela a beaucoup de chiffres magiques pour obtenir le dimensionnement et la position de placement, donc je ne suis donc pas sûr à quel point il est évolutif, mais il y en tire au moins avec CSS dans cette situation.
<h1>Heading</h1>
Voici une idée où vous pouvez compter sur 2 pseudo-éléments et une coloration de fond pour l'approcher. Vous avez simplement besoin de trouver la valeur correcte pour avoir le chevauchement parfait entre les deux pseudo éléments.
p>
<h1>Heading</h1>
Essayez-vous de l'obtenir pour que chaque coin du triangle soit arrondi? Devez-vous le faire dans CSS? SVG pourrait être plus simple
C'est mon plan de sauvegarde. Mais, ce serait génial si je pouvais juste le faire en CSS.
Dupliqué possible de Comment faire du triangle à 3 angles dans CSS