Marketing

Products

The possibilities of CSS is constantly evolving allowing us to do much more creative ideas than previously possible. We are going to take a look at 5 different CSS techniques that'll add a modern touch to your website.

CSS Arrows, Bubbles and Triangles

CSS triangles are fairly easy to achieve. We'll need to implement the :before or :after pseudo-classes and assign them a certain border size to attach a triangle, arrow or bubble onto another element. If you just want a standalone triangle, you can create its own class.

Creating a Standalone Triangle

We create a box with zero width and height so that the size of the triangle itself is defined by the width of the border we set. In an up arrow, the bottom border is coloured while the left and right are transparent. In a bottom arrow, the top border is coloured whilst the left and right are transparent.

We control the width using the left and right sizes. In our instance, 11px each meaning a 22px width altogether. The height is from the 10px. This creates a scalene or isosceles triangle.

To create an equilateral triangle, you need to set the height to 86.6% of the total width. That is: (border-left-width + border-right-width) * 0.866% = border-bottom-width

In our example above this would produce:

.triangleTop {
// ....
border-width: 0 11px 19.1px 11px;
}

Creating an Arrow / Bubble

To attach a triangle onto a parent element, we have to change our CSS slightly. Lets create a simple container:

CSS Shapes

Creating shapes in CSS isn't that common, but it is do-able. You need to work with the :before, :after and setting different borders on each. A complete list of what is currently possible can be found here.

About the Author

From the small, to the large, Lewis has tackled and developed a vast selection of projects since he started developing over 8 years ago. Lewis has the ability to program in over 25 languages from the well-known; PHP, Java, C and Objective-C to the less well-known; RDFa, Sparql and Maude. For any queries regarding the realisation and development of your project, Lewis will be your primary contact. Outside of work, Lewis has a passion for films, music and he’s also a bit of a Disney geek.