Default

The default border is on the bottom, left-to-right, and 30px tall.

<div class="angled-border"></div>

Direction

The two direction options are ltr (left to right) and rtl (right to left). To set the direction, use the data-direction attribute.

<div class="angled-border" data-direction="rtl"></div>

<div class="angled-border" data-direction="ltr"></div>

Position

The two position options are top and bottom (right to left). To set the position, use the data-position attribute.

<div class="angled-border" data-position="top"></div>

<div class="angled-border" data-position="bottom"></div>

Height

To set the border height, use the data-height attribute.

<div class="angled-border" data-height="10"></div>

<div class="angled-border" data-height="100"></div>

Color

To set the border color, use the data-color attribute. Valid color formats include: Hex, RGB, RGBA, or CSS Color Names. By default, the border will inherit its parent’s background color.

Some examples: #bada55, rgb(186, 218, 85), rgba(186, 218, 85, 0.5), YellowGreen.

<div class="angled-border" data-color="#bada55"></div>

More examples

<div class="angled-border" data-height="50" data-position="top" data-direction="rtl"></div>

<div class="half angled-border" data-height="50" data-direction="rtl"></div>
<div class="half angled-border" data-height="50"></div>