Je veux utiliser CSS de base pour faire du triangle dans une page HTML. J'utilise des photos triangulaires qui prennent le temps de charger, je tiens donc à réduire le temps de chargement de ma page.
4 Réponses :
impossible avec HTML, mais avec CSS. Exemple:
.triangle {
width: 0;
height: 0;
border: solid 30px;
border-color: transparent transparent black transparent;
}
Notez que, en laissant deux frontières, vous obtenez plutôt des triangles à la place, ce qui vous permet de générer n'importe quel triangle dont vous avez besoin. Voir ma réponse et ma réponse et Jsfiddle.net/gr4kj/5 inutilePickles.com/triangles
C'est la meilleure explication sur la façon de créer des triangles CSS: http://www.uelesspickles.com/triangles /
En créant des divs sans largeur ou en hauteur, les frontières finissent par créer un triangle lorsque vous laissez certaines des bordures comme transparentes. P>
Crédit strong> Cette page a été écrit par un collègue avant que d'autres personnes ont compris cette astuce. p> p>
<div id="tri"></div>
Le truc derrière la fabrication d'un triangle CSS est
div vide
- Faites sa hauteur et sa largeur 0.
- Donnez 2 côtés opposés à la même frontière et faites-les transparent.
- Donnez au troisième la même largeur de la bordure, donnez-lui une couleur unie.
J'espère que cela aide.
Vérifiez ce jsfiddle
Ne fonctionne pas. Sauf si vous avez manqué une étape dans votre explication. Jsfiddle .
Merci mis à jour !!! S'il vous plaît mettre à jour si vous pouvez l'expliquer ou avoir une autre idée / astuce pour la même chose.
Ceci fera un triangle
<svg width="100" height="100">
<polygon points="50, 50, 100, 100, 0, 100" fill="yellow" />
</svg>
Pour comprendre comment cette forme fonctionne et pour des solutions alternatives, veuillez consulter Stackoverflow.com/q/7073484/1811992