Help with making glowing triangle is css

HTML & CSS
1

Hi guys,
I was drawing something in pure css and one thing that I could not manage to draw was a triangle that glowed.
Here is the CSS I was using:

#glowTriangle{
				width:0;
				height:0;
				margin-left:10px;
				background:transparent
				border-color:#ff0000 transparent transparent transparent ;
				border-style:solid;
				border-width:27px;
				box-shadow:0 0 5px #fff;
			}

and the html was just a div tag with the id #glowTriangle.

But what the above code does is sets a glow / white box shadow around the box that the triangle is a part of.

Can anyone help me add the glow inside the box so that it looks like its coming off the triangle or if possible add the glow to the triangle itself ?

Thanks in Advance, I really appreciate it.

Best Regards,
Team 1504.

2

Unfortunately, triangle-shadow won’t be coming out until CSS4. :stuck_out_tongue:

box-shadow has its limitations. I suspect you are better off doing this as an image.

3

You could do something like this for modern browsers only.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    background:#000
}
#glowTriangle{
    height:18px;
    overflow:hidden;
    width:40px;
}
#glowTriangle:after {
    content:" ";
    width:27px;
    height:27px;
    background:red;
    -moz-transform: rotate(45deg) scale(1.0);
    -webkit-transform: rotate(45deg) scale(1.0);
    transform: rotate(45deg) scale(1.0);
    box-shadow:0 0 15px #fff;
    display:block;
    margin:-17px auto 0;
}
</style>
</head>
<body>
<div id="glowTriangle"></div>
</body>
</html>
4

Ha ha, too clever! (That’s called “thinking outside the box-shadow” :slight_smile: )

5

haha i love the humor ralph.

And thank you Paul, that solution is extremely clever, but im not a fan of code that doesn’t validate. So i think ill have to stick with a bgimage.

or do you guys think i could do this is svg?

6

It’s alright to have code that doesn’t validate, as long as you know why it doesn’t validate, and there isn’t really another easy option.

If you have a problem with code in general that invalidates, it’s kind of stupid to be nitpicky like that. Sorry to be so blunt.

7

Then why did you supply us with invalid code to start with :slight_smile: (try validating and see).

As you were using box-shadow anyway which only very modern browsers support I assumed you wouldn’t mind the transform properties either but if you want to support older browsers then just use an image. I thought you were just playing around and trying things out :slight_smile:

8

As you were using box-shadow anyway which only very modern browsers support I assumed you wouldn’t mind the transform properties either but if you want to support older browsers then just use an image. I thought you were just playing around and trying things out

I was just playing around with things. As I often do in web design, just to see what I can accomplish without a real goal set in mind. I guess thats why some of my creations are innovative and some are just stupid :slight_smile:

Hmm, i didn’t know how little support it had. For some reason, I always assumed that box-shadow and border-radius have the biggest support of the new css properties. Also because they were some of he most requested features.
Err oh wait, isn’t that text-shadow and border-radius?

And, i had no clue that it didn’t validate because in my mind i was using valid code. lol.
Maybe i’ll go with Paul’s solution and remove the shadow and triangle styles and serve an image for ie8 and below-- does that sound good?

Also idk if i want to use a header request just for the triangle. Maybe i’ll include it in another image and do background-position. Or if i can come up with a small gif nor svg that may work. too.