CSS Triangles and Other Shapes

CSS borders come together at an angle at any corner. This isn’t obvious when setting a border that’s the same color on all sides or if your border-width is only a few px. Making the width much larger and setting different border-colors on different sides lets you see this clearly. Taking advantage of these angles we can use the border-property to create some interesting shapes.

Creating a triangle is a matter of setting the border-color on 3 of the 4 sides to transparent. You also want to set the width and height of the element to be 0 in order for all 4 corners to meet at a point. You can set the border opposite the triangle to 0 as well, but the adjacent borders need to maintain a width or the entire element with borders will collapse to a single point.

The HTML:

<div></div>

The CSS:

.triangle {
	border-color: transparent transparent green transparent;
	border-style: solid;
	border-width: 0px 300px 300px 300px;
	height: 0px;
	width: 0px;
}

With a little experimentation you can create moe interesting shapes, especially if you combine several elements.

Understanding !important

!important is a way to override CSS specificity. In general it’s not the best solution since the more you use it, the more you end up needing to use it again. It can make your CSS unmaintainable in a hurry. It can be useful due to a quirk in IE. When you have something like the following

h1 {
	color: red !important;
	color: blue
}

browsers should show the h1 with a color red. IE, however will show the style that comes last instead of following the rules of precedence. So the above code would show your h1 as red in all browsers except IE where the color would be blue.

Visibility or Display?

On the surface both the CSS visibility and display properties seem to do the same thing, hide or show an element on the page. Beneath the surface they work differently.

  • {visibility: hidden} – The element holds the space, but isn’t seen
  • {display: none} – The element does not hold space. Other elements collapse to fill the space

Most of the time you likely want to use display: none, unless your goal is to leave an empty open space on your page.

Create a CSS Frame for Images

01rr0ema

Many images look nice a frame. You typically frame pictures before hanging them on a wall so why not add a frame to images on your website. Just like what you can see how every article image here at instantShift is framed using modified verion of this very same trick.

The trick is to wrap your images in a div and add a simple class.

The HTML:

<div><img src="" alt="" height="" width=""></div>

The CSS:

.frame {
	border: 2px ridge #000;
	 padding: 10px;
	background-color: #fff;
}

.frame img {
	border: 2px solid #ooo;
	padding: 1px;
	 margin: 10px;
}

You can use a variety of border-style values to create different looks to the frame (groove, ridge, inset, outset, double, dotted, dashed, solid). The padding and background-color on the frame div will create the look of a mat around your image. Adding border, padding, and margin to the image itself can create the effect of having a second mat around your image for an extra effect.

Once set up all you’ll need to do to add your frame to any image is wrap it with a div and assign the class. You can even create several different styles of frames and then pick and choose which to use for each image.

Advertisements

5 thoughts on “CSS Triangles and Other Shapes

  1. I just want to mention I am just new to blogging and site-building and seriously enjoyed this website. Likely I’m planning to bookmark your blog post . You surely come with outstanding writings. Bless you for revealing your webpage.

  2. You…are…my…hero!!! I cant believe something like this exists on the internet! Its so true, so honest, and more than that you dont sound like an idiot! Finally, someone who knows how to talk about a subject without sounding like a kid who didnt get that bike he wanted for Christmas.

  3. I hope you never stop! This is one of the best blogs Ive ever read. Youve got some mad skill here, man. I just hope that you dont lose your style because youre definitely one of the coolest bloggers out there. Please keep it up because the internet needs someone like you spreading the word.

  4. Magnificent website. Lots of useful info here. I’m sending it to several buddies ans additionally sharing in delicious. And of course, thanks for your sweat!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s