Friday, January 8, 2010

Creating Triangles in CSS

Little people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 40px. To demonstrate here is a div with all sides colored.


HTML

<div class="css-arrow-multicolor">
</div>

CSS

.css-arrow-multicolor {
  border-color: red green blue orange;
  border-style:solid;
  border-width:40px;
  width:0;
  height:0;
}


As you can see there are triangles hidden in that square. These triangles are right triangles with a little tweaking with the border sizes you can get acute triangles.


CSS

.css-arrow-acute {
  border-color: red green blue orange;
  border-style:solid;
  border-width:25px 10px 15px 30px;
  width:0;
  height:0;
}

With a little creativity and tweaking there are lots of shapes that can be made.

border-style:dotted;

border-style:dashed;

border-style:outset;

border-style:inset;

border-style:ridge;

border-style:groove;

border-style:double;

Never thought about doing this with CSS!? Amazing isn't it!

5 comments:

May 9, 2013 at 6:39 PM Anonymous said...

I almost never leave a response, however i did a few searching and wound up here "Creating Triangles in CSS".
And I do have a few questions for you if you tend not to mind.
Is it only me or does it look like some of the responses come across
like they are left by brain dead folks? :-P And, if you are posting on other places, I'd like to follow everything fresh you have to post. Would you list of all of all your shared pages like your Facebook page, twitter feed, or linkedin profile?

Also visit my web page: www.scooterdepot.us

May 20, 2013 at 4:09 AM Anonymous said...

I do consider all the concepts you have introduced for your post.
They are very convincing and will certainly work. Still, the posts are too brief for novices.
May just you please extend them a bit from next time? Thank you
for the post.

Feel free to surf to my homepage ... penis enlargement

June 4, 2013 at 12:26 AM Anonymous said...

Howdy! I simply wish to give you a big thumbs up for your excellent info you have got right here on this post.
I am returning to your web site for more soon.


My homepage danijelmajcen.com

June 9, 2013 at 2:02 PM Anonymous said...

This is very attention-grabbing, You're an excessively professional blogger. I have joined your rss feed and stay up for in the hunt for extra of your great post. Also, I've shared your website in my social networks

Feel free to visit my web site ... web videos

November 16, 2013 at 11:46 AM Anonymous said...

Hello, I enjoy reading all of your post. I like to write a little comment to support you.



Here is my web-site web page ()

Post a Comment