csslinecss-shapes

Drawing angled lines in CSS


What I'm trying to do LOOKS simple, but I can't seem to figure out how to do it.

As you can see in my image there are a couple of red lines that go across the bottom, then bend upwards close to the right side.

Is there a way in CSS to draw a line like this?

example showing lines


Solution

  • You can create angled lines in CSS by using skew transforms (transform: skew(Xdeg)). Below is a sample snippet:

    .shape {
      height: 50px;
      width: 200px;
      border-bottom: 2px solid red;
      border-right: 2px solid red;
      -moz-transform: skew(-45deg);
      -webkit-transform: skew(-45deg);
      transform: skew(-45deg);
    }
    <div class="shape"></div>


    Double line with one above the content area and one behind it can also be done using a single element (and a couple of pseudos) like in the below snippet:

    .shape:before {
      position: absolute;
      bottom: -5px;
      left: -5px;
      content: '';
      height: 50px;
      width: 100%;
      border-bottom: 3px solid red;
      border-right: 4px solid red;
      -webkit-transform: skew(-45deg);
      -moz-transform: skew(-45deg);
      transform: skew(-45deg);
    }
    .shape:after {
      position: absolute;
      content: '';
      bottom: -10px;
      left: 0px;
      height: 55px;
      width: 100%;
      border-bottom: 3px solid red;
      border-right: 4px solid red;
      -webkit-transform: skew(-45deg);
      -moz-transform: skew(-45deg);
      transform: skew(-45deg);
      z-index: -1;
    }
    .shape {
      position: relative;
      height: 80px;
      width: 400px;
      background: whitesmoke;
    }
    <div class="shape">
      Some text that goes within the element...
    </div>