Comment fonctionnent les sortingangles CSS?

CSS Tricks – Shapes of CSS propose de nombreuses formes CSS différentes et je suis particulièrement perplexe avec un sortingangle:

Triangle CSS

#sortingangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 
 

Comment et pourquoi ça marche?

    Triangles CSS: une tragédie en cinq actes

    Comme on l’a dit , les bordures de largeur égale se heurtent à des angles de 45 degrés:

    les frontières se rencontrent à des angles de 45 degrés, contenu au milieu

    Lorsque vous n’avez pas de bordure supérieure, cela ressemble à ceci:

    pas de bordure supérieure

    Ensuite, vous lui donnez une largeur de 0 …

    pas de largeur

    … et une hauteur de 0 …

    pas de hauteur non plus

    … et enfin, vous rendez transparentes les deux bordures latérales:

    bordures latérales transparentes

    Cela se traduit par un sortingangle.

    Les bordures utilisent une arête inclinée à l’endroit où elles se croisent (angle de 45 ° avec des bordures de largeur égale, mais la modification de la largeur des bordures peut fausser l’angle).

    Exemple de bordure

    jsfiddle .

    En masquant certaines bordures, vous pouvez obtenir l’effet de sortingangle (comme vous pouvez le voir ci-dessus en rendant les différentes parties de couleurs différentes). transparent est souvent utilisé comme couleur de bord pour obtenir la forme du sortingangle.

    Commencez avec un carré de base et des bordures. Chaque bordure recevra une couleur différente afin que nous puissions les distinguer:

     .sortingangle { border-color: yellow blue red green; border-style: solid; border-width: 200px 200px 200px 200px; height: 0px; width: 0px; } 

    ce qui vous donne ceci :

    carré avec quatre frontières

    Mais il n’y a pas besoin de la bordure supérieure, définissez donc sa largeur à 0px . Maintenant, notre bord inférieur de 200px fera notre sortingangle de 200px.

     .sortingangle { border-color: yellow blue red green; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; } 

    et nous obtiendrons ceci :

    moitié inférieure de carré avec quatre frontières

    Ensuite, pour masquer les deux sortingangles latéraux, définissez la couleur de la bordure sur transparente. Étant donné que la bordure supérieure a été effectivement supprimée, nous pouvons également définir la couleur de la bordure supérieure sur transparente.

     .sortingangle { border-color: transparent transparent red transparent; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; } 

    enfin nous obtenons ceci :

    bordure inférieure triangulaire

    Une approche différente:

    Les sortingangles CSS3 avec transformation tournent

    La forme sortingangular est assez facile à réaliser en utilisant cette technique. Pour les personnes qui préfèrent voir une animation expliquant comment cette technique fonctionne, c’est:

    animation gif: comment faire pivoter un triangle avec transform

    • Lien vers l’ ANIMATION: Comment créer un sortingangle CSS3 .
    • Et DEMO: les sortingangles CSS3 réalisés avec transformée tournent.

    Sinon, voici une explication détaillée en 4 actes (ce n’est pas une tragédie) de la façon de faire un sortingangle rectangle isocèle avec un élément.

    • Note 1: pour les sortingangles non isocèles et les trucs de fantaisie, vous pouvez voir l’étape 4 .
    • Remarque 2: dans les extraits suivants, les préfixes du fournisseur ne sont pas inclus. ils sont inclus dans les démos du codepen .
    • Note 3: le HTML pour l’explication suivante est toujours:


    ÉTAPE 1: Faire un div

    Facile, assurez-vous simplement que la width = 1.41 x height . Vous pouvez utiliser n’importe quel techinque ( voir ici ), y compris l’utilisation de pourcentages et de padding-bottom pour maintenir le ratio d’aspect et créer un sortingangle réactif . Dans l’image suivante, le div a une bordure jaune d’or.

    Dans ce div, insérez un pseudo-élément et donnez-lui 100% de largeur et de hauteur de parent. Le pseudo-élément a un arrière-plan bleu dans l’image suivante.

    Faire un triangle CSS avec transformer roate étape 1

    A ce stade, nous avons ce CSS :

     .tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; } .tr: before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0079C6; } 

    ÉTAPE 2: Rotons

    Le plus important: définir une origine de transformation . L’ origine par défaut est au centre du pseudo-élément et nous en avons besoin en bas à gauche. En ajoutant ce CSS au pseudo élément:

    transform-origin:0 100%; ou transform-origin: left bottom;

    Maintenant, nous pouvons faire pivoter le pseudo-élément de 45 degrés dans le sens des aiguilles d’une montre avec transform : rotate(45deg);

    Créer un triangle avec CSS3 étape 2

    A ce stade, nous avons ce CSS :

     .tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; } .tr:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0079C6; transform-origin: 0 100%; transform: rotate(45deg); } 

    ÉTAPE 3: cachez-le

    Pour masquer les parties indésirables du pseudo-élément (tout ce qui déborde le div avec la bordure jaune), il vous suffit de définir le overflow:hidden; sur le récipient. après avoir enlevé la bordure jaune, vous obtenez … un TRIANGLE ! :

    DEMO

    Triangle CSS

    CSS:

     .tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; overflow: hidden; } .tr:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0079C6; transform-origin: 0 100%; transform: rotate(45deg); } 

    ÉTAPE 4: aller plus loin …

    Comme indiqué dans la démo , vous pouvez personnaliser les sortingangles:

    1. Faites-les plus fines ou plus plates en jouant avec skewX() .
    2. Faites-les pointer à gauche, à droite ou dans toute autre direction en jouant avec le sens de transformation et le sens de rotation.
    3. Réfléchissez avec la propriété de transformation 3D.
    4. Donne les frontières du sortingangle
    5. Mettre une image dans le sortingangle
    6. Beaucoup plus … Libérez les pouvoirs de CSS3 !

    Pourquoi utiliser cette technique?

    1. Triangle peut facilement être réactif.
    2. Vous pouvez faire un sortingangle avec une bordure .
    3. Vous pouvez maintenir les limites du sortingangle. Cela signifie que vous pouvez déclencher l’état de survol ou cliquer sur un événement uniquement lorsque le curseur se trouve dans le sortingangle . Cela peut devenir très pratique dans certaines situations comme celle-ci où chaque sortingangle ne peut pas superposer ses voisins, de sorte que chaque sortingangle a son propre état de survol.
    4. Vous pouvez faire des effets de fantaisie comme des reflections .
    5. Il vous aidera à comprendre les propriétés de transformation 2D et 3D.

    Pourquoi ne pas utiliser cette technique?

    1. Le principal inconvénient est la compatibilité du navigateur , les propriétés de transformation 2D sont sockets en charge par IE9 + et vous ne pouvez donc pas utiliser cette technique si vous envisagez de prendre en charge IE8. Voir CanIuse pour plus d’informations. Pour certains effets de fantaisie utilisant des transformations 3D comme le navigateur de reflection, la prise en charge est IE10 + (voir canIuse pour plus d’informations).
    2. Vous n’avez besoin de rien de réactif et un simple sortingangle est parfait pour vous, alors vous devriez opter pour la technique de bordure expliquée ici: une meilleure compatibilité avec le navigateur et une meilleure compréhension grâce aux messages de conversion ici.

    Voici une animation dans JSFiddle que j’ai créée pour la démonstration.

    Voir également l’extrait ci-dessous.

    Ceci est un GIF animé fait à partir d’un Screencast

    Gif animé du triangle

     transforms = [ {'border-left-width' :'30', 'margin-left': '70'}, {'border-bottom-width' :'80'}, {'border-right-width' :'30'}, {'border-top-width' :'0', 'margin-top': '70'}, {'width' :'0'}, {'height' :'0', 'margin-top': '120'}, {'borderLeftColor' :'transparent'}, {'borderRightColor' :'transparent'} ]; $('#a').click(function() {$('.border').sortinggger("click");}); (function($) { var duration = 1000 $('.border').click(function() { for ( var i=0; i < transforms.length; i++ ) { $(this) .animate(transforms[i], duration) } }).end() }(jQuery)) 
     .border { margin: 20px 50px; width: 50px; height: 50px; border-width: 50px; border-style: solid; border-top-color: green; border-right-color: yellow; border-bottom-color: red; border-left-color: blue; cursor: pointer } 
       Click it!

    Disons que nous avons les div suivantes:

     

    Maintenant, éditez le CSS pas à pas, vous aurez une idée claire de ce qui se passe autour

    ÉTAPE 1: JSfiddle Link:

      #sortingangle { background: purple; width :150px; height:150PX; border-left: 50px solid black ; border-right: 50px solid black; border-bottom: 50px solid black; border-top: 50px solid black; } 

    Ceci est une simple div. Avec un CSS très simple. Donc, un profane peut comprendre. Div a des dimensions de 150 x 150 pixels avec la bordure de 50 pixels. L’image est attachée:

    entrer la description de l'image ici

    ÉTAPE 2: JSfiddle Link:

     #sortingangle { background: purple; width :150px; height:150PX; border-left: 50px solid yellow ; border-right: 50px solid green; border-bottom: 50px solid red; border-top: 50px solid blue; } 

    Maintenant, je viens de changer la couleur des bordures des 4 côtés. L’image est attachée.

    entrer la description de l'image ici

    ÉTAPE: 3 JSfiddle Link:

     #sortingangle { background: purple; width :0; height:0; border-left: 50px solid yellow ; border-right: 50px solid green; border-bottom: 50px solid red; border-top: 50px solid blue; } 

    Maintenant, je viens de changer la hauteur et la largeur de div de 150 pixels à zéro. L’image est attachée

    entrer la description de l'image ici

    ÉTAPE 4: JSfiddle:

     #sortingangle { background: purple; width :0px; height:0px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; border-top: 50px solid transparent; } 

    Maintenant, j’ai fait en sorte que toutes les bordures soient transparentes en dehors de la bordure inférieure. L’image est jointe ci-dessous.

    entrer la description de l'image ici

    ÉTAPE 5: JSfiddle Link:

     #sortingangle { background: white; width :0px; height:0px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; border-top: 50px solid transparent; } 

    Maintenant, je viens de changer la couleur de fond en blanc. L’image est attachée.

    entrer la description de l'image ici

    Nous avons donc obtenu le sortingangle dont nous avions besoin.

    Et maintenant, quelque chose de complètement différent …

    Au lieu d’utiliser des astuces CSS, n’oubliez pas les solutions aussi simples que les entités HTML:

      

    Résultat:

    Voir: Quelles sont les entités HTML pour les sortingangles haut et bas?

    Considérons le sortingangle ci-dessous

     .sortingangle { border-bottom:15px solid #000; border-left:10px solid transparent; border-right:10px solid transparent; width:0; height:0; } 

    C’est ce qu’on nous donne:

    Petit triangle en sortie

    Pourquoi est-ce sorti sous cette forme? Le diagramme ci-dessous explique les dimensions, notez que 15px a été utilisé pour la bordure inférieure et 10px pour la gauche et la droite.

    Grand triangle

    Il est assez facile de créer un sortingangle à angle droit en supprimant la bordure droite.

    Triangle à angle droit

    En allant un peu plus loin, en utilisant css basé sur ceci, j’ai ajouté des flèches sur mes boutons arrière et suivant (oui, je sais que ce n’est pas un navigateur à 100%, mais pas moins).

     .sortingangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin:20px auto; } .sortingangle-down { border-bottom:none; border-top: 100px solid red; } .sortingangle-left { border-left:none; border-right: 100px solid red; border-bottom: 50px solid transparent; border-top: 50px solid transparent; } .sortingangle-right { border-right:none; border-left: 100px solid red; border-bottom: 50px solid transparent; border-top: 50px solid transparent; } .sortingangle-after:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid red; margin:0 5px; content:""; display:inline-block; } .sortingangle-after-right:after { border-right:none; border-left: 5px solid blue; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } .sortingangle-before:before { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid blue; margin:0 5px; content:""; display:inline-block; } .sortingangle-before-left:before { border-left:none; border-right: 5px solid blue; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } 
     
    Back Next

    Une approche différente. Avec dégradé linéaire (pour IE, uniquement IE 10+). Vous pouvez utiliser n’importe quel angle:

     .sortingangle { margin: 50px auto; width: 100px; height: 100px; /* linear gradient */ background: -moz-linear-gradient(-45deg, rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* W3C */; } 
     

    C’est une vieille question, mais je pense que cela vaudra la peine de partager comment créer une flèche en utilisant cette technique de sortingangle.

    Étape 1:

    Permet de créer 2 sortingangles, pour le second nous utiliserons la pseudo-classe :after et la positionnerons juste en dessous de l’autre:

    2 triangles

     .arrow{ width: 0; height: 0; border-radius: 50px; display: inline-block; position: relative; } .arrow:after{ content: ""; width: 0; height: 0; position: absolute; } .arrow-up{ border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #333; } .arrow-up:after{ top: 5px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #ccc; right: -50px; } 
     

    clip-path CSS

    C’est quelque chose que j’estime que cette question a manqué; clip-path

    clip-path en quelques mots

    Clipper, avec la propriété de clip-path , revient à couper une forme (comme un cercle ou un pentagone) à partir d’une feuille de papier rectangular. La propriété appartient à la spécification « CSS Masking Module Level 1 ». La spécification indique que «le masquage CSS fournit deux moyens pour cacher partiellement ou totalement des éléments visuels: masquage et découpage».

    • Extrait de Smashing Magazine

    clip-path utilisera l’élément lui-même plutôt que ses bordures pour couper la forme que vous spécifiez dans ses parameters. Il utilise un système de coordonnées basé sur le pourcentage super simple qui rend l’édition très facile et vous permet de le prendre et de créer des formes étranges et merveilleuses en quelques minutes.


    Exemple de forme sortingangular

     div { -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: red; width: 100px; height: 100px; } 
     

    OK, ce sortingangle sera créé à cause de la façon dont les bordures des éléments fonctionnent ensemble en HTML et CSS …

    Comme nous utilisons habituellement des bordures 1 ou 2px, nous ne remarquons jamais que les bordures se font à 45 ° les unes des autres avec la même largeur et que si la largeur change, le degré d’angle est également modifié.

     .sortingangle { width: 100px; height: 100px; border-left: 50px solid black; border-right: 50px solid black; border-bottom: 100px solid red; } 
     

    SASS (SCSS) sortingangle mixin

    J’ai écrit ceci pour faciliter (et DRY) la génération automatique d’un sortingangle CSS:

     // Triangle helper mixin (by Yair Even-Or) // @param {Direction} $direction - either `top`, `right`, `bottom` or `left` // @param {Color} $color [currentcolor] - Triangle color // @param {Length} $size [1em] - Triangle size @mixin sortingangle($direction, $color: currentcolor, $size: 1em) { $size: $size/2; $transparent: rgba($color, 0); $opposite: (top:bottom, right:left, left:right, bottom:top); content: ''; display: inline-block; width: 0; height: 0; border: $size solid $transparent; border-#{map-get($opposite, $direction)}-color: $color; margin-#{$direction}: -$size; } 

    exemple d’utilisation:

     span { @include sortingangle(bottom, red, 10px); } 

    Page du terrain de jeu


    Note importante:
    Si le sortingangle semble pixellisé dans certains navigateurs, essayez l’une des méthodes décrites ici .

    J’ai fait un sample en enjoycss

    http://enjoycss.com/5p#border

    vous pouvez jouer avec et voir comment la chose change;)

    entrer la description de l'image ici

    voici un autre violon:

     .container:after { position: absolute; right: 0; content: ""; margin-right:-50px; margin-bottom: -8px; border-width: 25px; border-style: solid; border-color: transparent transparent transparent #000; width: 0; height: 0; z-index: 10; -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out; transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out; bottom: 21px; } .container { float: left; margin-top: 100px; position: relative; width: 150px; height: 80px; background-color: #000; } .containerRed { float: left; margin-top: 100px; position: relative; width: 100px; height: 80px; background-color: red; } 

    https://jsfiddle.net/qdhvdb17/

    D’autres l’ont déjà bien expliqué. Laissez-moi vous donner une animation qui vous l’expliquera rapidement: http://codepen.io/chriscoyier/pen/lotjh

    Voici un code pour jouer avec et apprendre les concepts.

    HTML:

       

    CSS:

     /*border-width is border thickness*/ #border-demo { background: gray; border-color: yellow blue red green;/*top right bottom left*/ border-style: solid; border-width: 25px 25px 25px 25px;/*top right bottom left*/ height: 50px; width: 50px; } 

    Jouez avec ceci et voyez ce qui se passe. Définissez la hauteur et la largeur à zéro. Supprimez ensuite la bordure supérieure et rendez transparents gauche et droit, ou regardez simplement le code ci-dessous pour créer un sortingangle css:

     #border-demo { border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 

    Presque toutes les réponses se concentrent sur le sortingangle construit à l’aide de la bordure. Je vais donc élaborer la méthode du gradient linéaire (comme indiqué dans la réponse de @lima_fil ).

    Utiliser une valeur de degré comme 45 ° nous obligera à respecter un ratio de taille spécifique pour obtenir le sortingangle que nous voulons et cela ne répondra pas:

     .sorting { width:100px; height:100px; background:linear-gradient(45deg, transparent 50%,red 0); /*To illustrate*/ border:1px solid; } 
     Good one 
    bad one
    bad one