Using CSS to Create Triangles

With CSS it’s super easy to create shapes out of pretty much any div. Some shapes are pretty straightforward to code, like squares and rectangles. Even circles are just squared with a border-radius set to 100%. Triangles, however, are a little more complicated to create. In order to make them, you have to manipulate the border property. For a triangle that points up, the border-left should be 50px solid transparent and the border-right should be the same — that will create the lines that come to a point. Then make sure the border-bottom is 100px solid #9fd175 (or whatever the color of your choice may be — also, the numbers are arbitrary: as long as the border-left and right px size is half of the border-bottom size, it should work to create a triangle shape). See the code below:

.triangle{
width: 0;
height: 0;
}

.triangle.up{
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #9fd175;
}

Screen Shot 2016-09-09 at 8.04.01 PM

To create a triangle pointing down, the border properties will need to be tweaked a bit to make the point face downwards:


.down{

border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #9fd175;

}

Screen Shot 2016-09-09 at 8.04.49 PM

See the code below for code that will create triangles that point to the left or to the right:


.left{

border-top: 50px solid transparent;
border-right: 100px solid #9fd175;
border-bottom: 50px solid transparent;

}

.right{

border-top: 50px solid transparent;
border-left: 100px solid #9fd175;
border-bottom: 50px solid transparent;

}

Screen Shot 2016-09-09 at 8.08.01 PM

Screen Shot 2016-09-09 at 8.08.12 PM

Now that you’ve mastered creating triangles, use them to add some dimension to your next projects!

Color Values: How to Define a Color in CSS

There are many different scenarios in which you’d have to define a color in your CSS — this probably most commonly happens with the color or background-color property, but it’s certainly used with others as well. Defining your color values is the easy part, but deciding how to do so can sometimes be tricky, because there are so […]

Read on...

How to Style Your Cursor with CSS3

There are so many different ways to style your cursor using CSS3. Most developers probably know about cursor: pointer, but what about the dozens of other ways to have your cursor appear? What follows is a list of some of the most useful cursor styles. Combine them with the :hover pseudo-selector for your styling to take […]

Read on...

How to Use CSS3’s Viewport Units

CSS3 has a really cool (and completely underrated) feature that allows developers to define the size of an element relative to the viewport. The units are vh (viewport height) and vw (viewport width), and they can be applied to elements like width, height, font-size, margin…basically anything that you might normally define with a px or […]

Read on...

Top Tools to Debug Your CSS

Screen Shot 2016-08-22 at 7.31.59 PM

Writing CSS is so much easier when you have access to a debugger or a CSS validator. These tools allow you to identify and fix anything that might be wrong with your code, and many of the developer tools also let you edit the content of a live site, which provides invaluable support during a […]

Read on...

Using CSS to Create a Fixed Header

Fixed headers are a popular trend in web design, and adding one to your site can be as easy as adding a position: fixed line to your CSS, but often it’s a little more complicated than that. Some other styling factors you’ll need to consider are top, width, and z-index. It’s important that you set […]

Read on...

How to Style Mandatory Fields with CSS3 Pseudo-Selectors

Screen Shot 2016-08-14 at 3.42.04 PM

It’s not uncommon for mandatory fields in a form to be marked as such — often these fields are marked with an asterisk or with a colored border around the input so that the user is aware that the particular form can’t be submitted without the required fields being filled out. With CSS3’s pseudo-selector :required, […]

Read on...

How To Use CSS3’s :not() Pseudo Selector

Screen Shot 2016-08-09 at 9.33.57 AM

CSS3’s :not pseudo selector makes it possible for you to select and apply styling to every type of element except one. This handy little trick can save you from having to manually write a lot of CSS code, because in just one line you can define a style to be applied to certain elements while […]

Read on...

Create Drop Caps Using CSS3

Screen Shot 2016-08-03 at 11.00.55 AM

A drop cap is the first letter of a paragraph or a text block that is larger and usually styled differently from the rest of the letters. This can be done a number of different ways, including inserting <span> tags into your HTML, but one effective and quick way to do it is by using […]

Read on...

Quick Tip: How to Minify Your CSS

Screen Shot 2016-07-25 at 5.39.31 PM

Minifying your CSS basically means to get rid of all of the unnecessary characters (spaces, line breaks, etc) to strip down your stylesheets so that only what is absolutely essential to run the code remains. Putting your CSS through this process makes your code more lightweight and can help to increase the speed and efficiency of […]

Read on...