web-dev-qa-db-fra.com

Comment créer un triangle CSS avec des bords lisses?

J'ai un triangle ( JSFiddle ) utilisant ce CSS:

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;
    }

Et ce HTML:

<div class="triangle"></div>

Cela fait un triangle, mais les lignes diagonales sont dentelées et pixellisées. Comment puis-je les rendre lisses? (J'ai pu les lisser dans Safari et Chrome en les faisant en pointillés, mais cela a brisé les triangles dans Firefox et IE.)

cssgeometrycss-shapessmoothedges
31
kirkaracha

Même en CSS pur, nous pouvons obtenir les diagonales lisses.

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid rgba(255, 255, 255, 0); 
    border-right: 20px solid rgba(255, 255, 255, 0);
}

Au lieu de donner de la transparence, vous pouvez utiliser rgba (255, 255, 255, 0). Cela donne à nouveau transparent. Mais l'alpha = 0 fait des diagonales lisses.

Vérifiez le support du navigateur pour rgba css-tricks.com/rgba-browser-support

Merci

19
iamjustcoder

Pour Firefox, vous pouvez ajouter -moz-transform: scale (.9999); pour rendre les bords lisses. Dans ton cas:

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;
    -moz-transform: scale(.9999);
}

Fera l'affaire.

54
Caner Şahin

Je viens de tomber sur le même problème et j'ai compris cette astuce (au moins, cela fonctionne sur un Mac):

-webkit-transform: rotate(0.05deg);
-moz-transform: scale(1.1);
-o-transform: rotate(0.05deg); /* Didn't check Opera yet */
transform: rotate(0.05deg);
29
unclenorton

L'utilisation du style de bordure inset pour des bordures transparentes donne de bien meilleurs résultats dans Firefox:

border-top: 22px solid $pink;
border-right: 84px inset transparent;
border-left: 84px inset transparent;
13
kcmr

Ce qui m'a vraiment aidé lorsque je suis tombé pour la première fois sur ce point, c'était l'échelle d'un triangle uniforme d'une certaine quantité. Firefox semble être particulièrement "énervé" avec les triangles scalènes. Cependant, les triangles parfaits sont rendus sans bords dentelés. Si des transformations CSS sont possibles dans votre projet, essayez simplement:

.triangle {
  width: 0;
  height: 0;
  border-top: 0;
  border-bottom: 20px solid #666699;
  border-left: 20px solid transparent; 
  border-right: 20px solid transparent;
  -moz-transform: scaleY(1.5); // optional: replace with Sass/SCSS/LESS mixin
  -moz-transform-Origin: top; // optional: replace with mixin, too
}

Cela a corrigé l'alias à travers l'Edge pour moi. JSFiddle ici (Mozilla uniquement en ce moment). J'espère que cela t'aides!

3
Sascha Michael Trinkaus

Une manière très hacky serait d'utiliser un div tourné

Ici, j'ai utilisé deux divs pour montrer un triangle:

<div class="triangle">
    <div class="rot"></div>
</div>

et fait pivoter la div intérieure pour deux côtés non droits du triangle:

.triangle{
    position:relative;
    width:100px;
    height:60px;
    border-bottom:1px solid black;
    border-radius:12px;
}
.rot{
    border-radius:10px;
    border-left: 1px solid black;
border-top: 1px solid black;
width:70px; height:70px;
    -webkit-transform:rotate(45deg);
    position:absolute;
    left:15px;
    top:23px;
}

Je n'ai pas essayé de trouver la relation entre les nombres.

Voici le violon du code:

http://jsfiddle.net/mohsen/HTMcF/

MAIS je vous suggère fortement d'utiliser l'élément canvas pour cette raison.

1
Mohsen

Pour moi, utiliser dashed pour les bordures transparentes fonctionnait pour la plupart des navigateurs qui ne les lissaient pas automatiquement et la rotation à 360 degrés fonctionnait pour l'ancien Webkit:

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px dashed transparent; 
    border-right: 20px dashed transparent;
    -webkit-transform: rotate(360deg);
}
1
tobymackenzie

Aucun des autres n'a travaillé pour moi, mais j'ai trouvé ce qui suit (par accident):

.triangle {
  border: 1.3rem dashed #666699;
  border-right: .5rem solid rgba(255, 255, 255, 0);
}

Le mélange de tirets/solide et du correctif rgba a fonctionné dans FF31, IE11 et Chrome36.

0
Don