[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.

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

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)
Modifié par MrSoul (12 May 2021 - 20:01)

Effectivement, beaucoup plus efficace avec le clip-path (malgré la compatibilité à 96%) !

https://jsfiddle.net/MrSoul/m6tx7hc3/5/

Merci à vous deux !