Tentative d'utilisation d'une couleur hexadécimale personnalisée pour mon triangle css (bordure). Cependant, comme il utilise des propriétés de bordure, je ne sais pas comment procéder. Je voudrais éviter javascript et css3 simplement pour des raisons de compatibilité. J'essaie de faire en sorte que le triangle ait un fond blanc avec une bordure de 1px (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/
css
border
css-shapes
Ed R
la source
la source
border-colorattribut, en fonction de la bordure colorée, le triangle pointera vers une direction différente. Pour tourner la flèche vers la gauche ,border-colortransparent #e3f5ff transparent transparent;.container:after.container:beforeJe sais que vous acceptez cela mais vérifiez celui-ci aussi avec moins de CSS:
http://jsfiddle.net/4ZeCz/3/
la source
-webkit-préfixe maintenant (et-ms-pour IE9). Tous les autres navigateurs le prennent en charge sans préfixe.Je pense que c'est plus simple en utilisant clip-path :
la source
Une autre façon d'accomplir cela, en particulier pour quelqu'un qui en a besoin pour travailler avec des triangles équilatéraux ou même scalènes comme je l'ai fait, est de l'utiliser
filter: drop-shadow(...)avec plusieurs valeurs et sans rayon de flou. Cela a l'avantage supplémentaire de ne pas avoir besoin de plusieurs éléments, ni d'accéder aux deux : avant et: après (j'essayais d'accomplir cela avec: après le contenu qui était en ligne, je voulais donc éviter le positionnement absolu).Dans le cas ci-dessus, le CSS de: after pourrait ressembler à ceci ( violon ):
Je pense qu'il y a cependant des limites ou des bizarreries:
<offset-y>valeur de la deuxième ombre portée () ci-dessus ressemble plus à 1px qu'à 1px, même si j'imagine que cela est lié à la trigonométrie (même si au moins sur mon moniteur, je ne vois aucune différence entre le valeurs réelles basées sur les triggers ou .5px ou même .1px d'ailleurs).<spread-radius>) de drop-shadow () pourrait être ce que je recherche vraiment au lieu de plusieurs valeurs de filtre, mais l'ajouter en fait tout simplement cassé les choses.) Ici, vous pouvez voir ce que commence à se produire lorsque vous dépassez 1px ( violon ):Remarquez le fait que le premier (vert) est appliqué une fois, mais le second (rouge) est appliqué à la fois au triangle jaune créé via la bordure ainsi qu'à l'ombre portée verte (), et au dernier (bleu) s'applique à tout ce qui précède. (Peut-être que c'est aussi lié à l'apparence .5px).
Mais je suppose que vous pouvez profiter de ces ombres portées qui se construisent les unes sur les autres si vous avez besoin de quelque chose de plus large que 1px, en les changeant en quelque chose comme ce qui suit ( violon ):
où le tout premier a un ensemble de rayons 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 de tous les côtés, et il en résulte dans certains coins arrondis ainsi que sur des bords assez rugueux, plus vous allez.
la source
la source