web-dev-qa-db-fra.com

Couleur de la bordure personnalisée du triangle CSS

Essayer d’utiliser une couleur hexagonale personnalisée pour mon triangle CSS (bordure). Cependant, comme il utilise des propriétés de bordure, je ne sais pas comment s'y prendre. Je voudrais éviter javascript et css3 simplement à cause de la compatibilité. J'essaie de faire en sorte que le triangle ait un fond blanc avec une bordure de 1 px (autour des côtés inclinés du triangle) avec la couleur # CAD5E0. Est-ce possible? Voici ce que j'ai jusqu'à présent:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 100%;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #CAD5E0;
    border-style: solid;
    border-width: 10px;
}​

Mon violon: http://jsfiddle.net/4ZeCz/

cssbordercss-shapes
102
Ed R

Vous devez en fait simuler avec deux triangles ...

.container {
    margin: 15px 30px;
    width: 200px;
    background: #fff;
    border: 1px solid #a00;
    position: relative;
    min-height: 200px;
    padding: 20px;
    text-align: center;
    color: #fff;
    font: bold 1.5em/180px Helvetica, sans-serif;
    text-shadow: 0 0 1px #000;
}

.container:after,
.container:before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.container:after {
    top: 10px;
    border-color: transparent transparent transparent #fdd;
    border-width: 10px;
}

.container:before {
    top: 9px;
    border-color: transparent transparent transparent #a00;
    border-width: 11px;
}

Mise à jour de Fiddle ici

 enter image description here

163
Scott

Je sais que vous acceptez cela, mais vérifiez celui-ci également avec moins de CSS:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    right:-7px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-right:1px solid #CAD5E0;
    border-bottom:1px solid #CAD5E0;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

http://jsfiddle.net/4ZeCz/3/

83
sandeep

Je pense que ceci est plus simple en utilisant clip-path :

.container {
  width: 150px;
  min-height: 150px;
  background: #ccc;
  padding: 8px;
  padding-right: 6%;
  display: inline-block;
  clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);
}
<div class="container">
test content
</div>

1
lalengua

Une autre façon de le faire, en particulier pour les personnes qui en ont besoin pour travailler avec des triangles équilatéraux ou même scalènes comme moi, consiste à utiliser filter: drop-shadow(...) avec plusieurs valeurs et sans rayon de flou. Cela présente l’avantage supplémentaire de ne pas avoir besoin de plusieurs éléments ou d’avoir accès à les deux: before et: after (j’essayais de faire cela avec: after un contenu qui était en ligne, donc je voulais aussi éviter le positionnement absolu). 

Pour le cas ci-dessus, le CSS de: after après pourrait ressembler à ceci ( violon ):

.container {
  margin-left: 15px;
  width: 200px;
  background: #FFFFFF;
  border: 1px solid #CAD5E0;
  padding: 4px;
  position: relative;
  min-height: 200px;
}
.container:after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}
<div class="container">
  Test Container
</div>

Je pense qu'il y a quelques limitations ou bizarreries, cependant:

  • Pas de support dans IE11 (bien que cela semble bien dans FF, Chrome et Edge)
  • Je ne sais pas trop pourquoi .5px pour la valeur <offset-y> dans la deuxième ombre portée () ci-dessus apparaît plus semblable à 1px que 1px, bien que j'imagine que c'est lié à la trigonométrie (bien qu'au moins sur mon moniteur, je ne vois aucune différence entre les valeurs réelles basées sur le trig ou .5px ou même .1px pour cette question).
  • Les bordures supérieures à 1px (leur apparence de cette façon) ne semblent pas bien fonctionner. Ou du moins, je n'ai pas trouvé la solution, mais voyez ci-dessous une solution moins optimiste pour aller un peu plus gros. (Je pense que le 4ème paramètre documenté (mais non supporté) (<spread-radius>) de drop-shadow () pourrait être ce que je recherche réellement au lieu de plusieurs valeurs de filtre, mais en l'ajoutant dans des éléments totalement cassés.) Vous pouvez voir ici ce qui commence à se produire quand on dépasse 1px ( fiddle ):

.container {
  background-color: #eee;
  padding: 1em;
}
.container:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20.4px 10px 0 10px;
  border-color: yellow transparent transparent transparent;
  margin-left: .25em;
  display: inline-block;
  filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}
<div class="container">
  Test Container
</div>

Remarquez l’amusement que le premier (vert) soit appliqué une fois, mais le second (rouge) s’applique à la fois au triangle jaune créé via une bordure, à l’ombre portée verte () et au dernier (bleu). est appliqué à tout ce qui précède. (Peut-être est-ce aussi lié à l'aspect apparence .5px).

Mais je suppose que vous pouvez tirer parti de ces ombres portées en construisant l'une sur l'autre si vous avez besoin de quelque chose de plus large que 1px, en les modifiant comme suit ( fiddle ):

filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);

où le tout premier a un ensemble de rayon de flou (2,5px dans ce cas, bien que le résultat semble multiplié), et tous les autres ont un flou à 0. Mais cela ne fonctionnera que pour la même couleur sur tous les côtés, et il en résulte dans certains coins arrondis ainsi que dans les angles assez rugueux, plus vous grossissez.

0
Max Starkenburg
.triangle{
    position: absolute;
    width:0px;
    height:0px;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 72px solid #DB5248;
}

.triangle:after{
    position: relative;
    content:"!";
    top:8px;
    left:-8px;
    color:#DB5248;
    font-size:40px;
}

.triangle:before{
    content:".";
    color: #DB5248;
    position: relative;
    top:-14px;
    left:-43px;
    border-left: 41px solid transparent;
    border-right: 41px solid transparent;
    border-bottom: 67px solid white;
}
0
Sharan