28172 sujets

CSS et mise en forme, CSS3

[Résolu] Triangle en pourcentage

Bonjour,

Je cherche à faire un truc un peu chiant, voir carrément impossible (mais à cœur vaillant... bla bla bla, expression de vieux).

Je cherche à faire un triangle top-right (facile), MAIS en pourcentage (impossible sur les borders).

Le concept étant de voir ce triangle suivre la taille de son parent (comme sur l'image lié).

Une idée en full css ?
Est-ce possible avec du SVG inline ?
Faut-il ajouter du JavaScript ?

Merci pour vos lumières.
Modérateur
Salut !

Est-ce que tu as un bout de code ? Un screenshot ou un exemple ?
J'ai du mal a voir. Il prend combien de % du parent ? Et des % de quoi (largeur, hauteur) ?

MrSoul a écrit :
Une idée en full css ?
Est-ce possible avec du SVG inline ?
Faut-il ajouter du JavaScript ?

En full CSS ca peut se faire.
En Svg aussi oui (inline ou pas d'ailleur)
En JS ca serait overkill Smiley lol
Ha, j'avais envoyé l'image sur le forum, mais ça n'a pas l'air de passer :

https://share.remy-photographie.com/storage/originals/3e/7f/Capture-decran-2021-05-12-a-173058.png

En gros, le parent change de taille selon le viewport.

J'ai réussi à faire un truc en svg, mais ça glitch sur firefox :

<div class="bloc-parent">
	<svg viewBox="0 0 500 500" preserveAspectRatio="none">
		<polyline style="fill:#E0E0E0;" points="500,0 500,500 0,500 "/>
	</svg>
</div>

.bloc-parent {
	background-color: red;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.bloc-parent svg {
	width: 100%;
	height: 100%;
}


* deux bugs, un premier qui rajoute du margin-bottom, corrigé avec l'overflow sur le parent, et un autre que je n'arrive pas à régler : selon la taille du parent, ça se cale à 100%-1px de celui-ci (ce qui produit une petite ligne d'1px disgracieuse).

Je précise que je suis toujours intéressé par d'autres méthodes (genre basic-shape, préfixé, ça semble assez compatible) Smiley smile
Modifié par MrSoul (12 May 2021 - 20:01)
Modérateur
Tu peut effectivement découpé un conteneur de façon simple avec clip-path:
exemple pour une forme triangulaire qui coupe en deux ton élément rectangulaire, seulement la moitié à partir du haut gauche restera visible.

clip-path: polygon(0 0, 0% 100%, 100% 0);


Voici un outil en ligne pour t'aider a créer des formes.

https://bennettfeely.com/clippy/
Modifié par gcyrillus (12 May 2021 - 21:07)
Meilleure solution
Sujet clos
Aller à