J'essaie de créer un triangle en CSS avec un fond dégradé. Je n'ai pas encore eu de succès. Y a-t-il un moyen de faire cela pour enlever cet effet vu dans l'image ci-dessous. (Le triangle qui est attaché à la mauvaise zone d'erreur de mot de passe.)
C'est la conception que j'ai jusqu'à présent dans HTML et CSS. strong> p> Voici le CSS que j'ai pour le triangle en ce moment. P> 
p> 
P> .error-triangle {
wwidth: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid blue;
margin-top: 64px;
margin-left: 350px;
position: fixed;
-webkit-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
-moz-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
background-image: -webkit-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
background-image: -moz-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
background-image: -o-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
background-image: -ms-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
background-image: linear-gradient(to top, #eb6767, #d94040 35%, #eb6767);
}
3 Réponses :
Vous pouvez créer un triangle CSS, mais pas un triangle CSS qui est lui-même un gradient. La seule astuce que je suggérerais est de choisir une couleur qui ressemble la plus à la couleur dans le fond de gradient. Cela dépend de la taille de votre gradient et de la façon dont le triangle va bien se fondre.
Pour le DIV rouge, vous pouvez essayer d'utiliser la couleur # D94040, mais elle manquera ensuite une bordure et une ombre portée. Cependant, ceux-ci peuvent être ajoutés. Pour ajouter une bordure à un triangle CSS, vous pouvez placer un TRIANGLE CSS qui a également la même taille. Tthis nécessiterait d'utiliser un positionnement absolu et un index z pour les chevaucher.
ou vous pouvez utiliser :: Après ou :: avant de créer vos triangles CSS sans le code HTML ajouté, mais cela ne fonctionnerait que dans les navigateurs modernes uniquement.
D'accord. Alors pensez-vous que ce serait mieux si je viens d'utiliser une image du triangle à la place?
Si c'était moi, je n'utiliserais pas de gradient du tout. Cela ferait l'air moins comme un bouton, et plus comme un avertissement.
En fait, vous pouvez créer un triangle avec un fond dégradé très facilement en utilisant des transformations. Codepen.io/thebabydino/pen/cbmxv
dans CSS3, vous pouvez créer un triangle avec le "truc de la frontière". Cette bordure peut être colorée et peut avoir un arrière-plan.
WebKit maintenant (et chrome 12 au moins) prend en charge les gradients comme image frontalière.
Pour une solution plus prise en charge, je vous suggère de "gradient" l'arrière-plan d'A: Avant un pseudo élément pour la sorcière, vous appliqueriez une "gradient de fond" + le (triangle CSS avec bordure).
Voici un générateur CStriangle pour que vous expérimentait.
Création de triangles (ou d'autres formes - pentagons, hexagones , octagons, Decagons , Dodecagons , Tetradecagons , octadecagons et ainsi de suite) avec un gradient (ou tout autre type de fond d'image) est vraiment facile avec CSS Transforms.
Mais dans ce cas, vous ne le faites pas même besoin d'un triangle. Il vous suffit de faire pivoter un pseudo-élément carré de 45deg et d'appliquer le gradient sur celui du coin au coin.
CSS :
Cela a l'air génial. Pouvez-vous également ajouter du texte Shadow au code? Je vous remercie
CSS uniquement flèches: CSSARROWPLEEE.COM