CSS Triangle

There are many resources out there about how to make a CSS triangle, so I’ll just keep this brief and reference the one I used.

Basically, its just a box with height and width of zero, and we use the border to create the triangle. If we use the below code, we will create a box made from four triangles (one from each border).

.arrow-right {
  width: 0px;
  height: 0px;
  border-top: 60px solid black;
  border-bottom: 60px solid black;
  border-left: 60px solid green;
  border-right: 60px solid blue;
}

This creates this shape:
Screen Shot 2015-03-27 at 7.40.05 AM

Now to just make a single triangle, we make three of them transpara

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid green;
  border-right: 60px solid transparent;
}

which makes:

Screen Shot 2015-03-27 at 7.43.38 AM

Now we can remove the borders that are transparent, but it will change the shape of the triangle. You can play around by removing various borders and see if you like the shape of the triangle. Also, playing with the size or number of pixels in all four sides of the border will adjust the shape of the triangle.

Credit here.

Make The Height of a Parent Div Wrap Around The Children with Float

Using floating divs is great, but can cause lots of other issues sometimes. One particular one is getting the height of a parent div to wrap around its children if the children have the float attribute.

There are several ways to do this mentioned in this Stack Overflow post, but here is the one that worked for me:

Use the :after psuedoelement on the parent div with the following CSS:

.parent:after {
  content: "";
  display: table;
  clear: both;	
}

Horizontal Line in HTML

So this is pretty simply, but I feel pretty useful.

To make a horizontal line, use the

<hr>

tag.  With no styling, it will give a result like this:


You can style it just like any other element, using CSS.

 <hr  style="height:3px;background-color: black;width:90%;" class="line1">

gives


Some credit here, although some of the stuff in that post is deprecated. I believe in HTML5, the best practices are to just use standard CSS to style lines.