Tag: shapes

It’s a trap-ezoid: CSS Shapes aren’t what you’d expect

Learn how to use CSS shapes to change how text flows around other elements…
csshead

Pure CSS3 Post Tags

This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts. Pure CSS post tags uses at least 2 CSS tricks such as CSS triangles and CSS circles…
csshead 0 Comments

The Shapes of CSS

Example page of shapes created with CSS. All use just a single HTML element. Any kind of CSS goes, as long as it’s supported in at least one browser…
csshead 0 Comments

CSS Arrows and Shapes Without Markup

Often it’s useful to show an arrow or some sort of contextual indication of what element something is related to. We see this frequently with tooltips that use arrows to point to the item that is triggering them. Today I’m going to show you a way to add in these visual hints without having to […]
csshead 0 Comments

Creating Shadows Around Polygons in CSS

Almost every polygon can be reduced to a combination of simpler shapes — a reduction that’s the essence of how we make complex shapes with HTML and CSS in the first place. So what we have to do is apply the shadow to both those boxes, and then cut off the overlap with clip…
csshead 0 Comments

The Hidden Power of border-radius

So hopefully after reading – Understanding CSS – Padding, Positioning and CSS3 – you understand the basics of CSS and have been experimenting with other properties. It is important to remember that some properties will allow you to achieve effects that aren’t necessarily stated. In this post we will explore the property border-radius and how […]
csshead 0 Comments

Creating Triangles in CSS

I’ve come across a few techniques and tips in my career, and one of them is this neat trick to create triangles in CSS. Little people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that…
csshead 0 Comments