Geek Answers Handbook

Creating a triangle in css with gradient background

I am trying to create a triangle in css with a gradient background. So far I have not had any success. Is there a way to do this to remove this effect seen in the image below. (A triangle attached to an erroneous password Invalid password.)

Photoshop Design enter image description here

This is the project that I still have in HTML and CSS.

enter image description here

Here is the css that I have for the triangle at the moment.

.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); }

I used this CSS tricks tutorial.

+6
source share
3 answers

Creating triangles (or other shapes - pentagons, hexagons , octagons, decagons , dodecagons , tetradecagons , octadecagons , etc.) with a gradient (or any other kind of image background) is very simple with CSS transformations.

But in this case, you don’t even need a triangle. You just need to rotate the square pseudo-element 45 degrees and apply a gradient from corner to corner.

demonstration

 <div class='warn'></div>

CSS

 .warn { position: relative; margin: 0 auto; border: solid 1px darkred; width: 12em; height: 3em; border-radius: .2em; background: linear-gradient(lightcoral, firebrick); } .warn:before { position: absolute; top: 50%; left: 0; margin: -.35em -.45em; border-left: inherit; border-bottom: inherit; /* pick width & height such that the diagonal of the square is 1em = 1/3 the height of the warn bubble */ width: .7em; height: .7em; border-radius: 0 0 0 .2em; transform: rotate(45deg); background: linear-gradient(-45deg, firebrick -100%, lightcoral 200%); content: ''; }
+17
source

You can create a CSS triangle, but not a CSS triangle, which in itself is a gradient. The only trick I would suggest is to choose the color that most resembles the color in a gradient background. It only depends on how big your gradient is and how well the triangle will harmonize.

For the red div, you can try using the color # d94040, but then it will have no border and shadow. However, they can be added. To add a border to the CSS triangle, you can place the same size CSS triangle inside yours also. This will require the use of absolute positioning and a z-index to overlap.

Or you can use :: after or :: before to create your CSS triangles without the added HTML, but then this will only work in modern browsers.

0
source

In CSS3, you can create a triangle with a "border trick". This border can be colored and may have a background.

WebKit (and, at least, Chrome 12) now supports gradients as a border image.

For a more supported solution, I offer you a “gradient” of the background: before the pseudo-element for the witch, you would apply a “background gradient” + trick (css triangle with border).

Here is the cssTriangle generator for experimentation.

0
source

More articles:


All Articles