Drawing angled lines in CSS

Question

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

Do you just want angled lines (or) one line above the image and one line behind like in the screenshot? — Harry
– Harry, Commented May 1, 2015 at 6:13
Yes, that give me enough information. If you post it as an answer to use the skew transformation I'll accept that as an answer. — Sherwin Flight
– Sherwin Flight, Commented May 1, 2015 at 6:19
Was working on exactly same idea as @Harry before I saw his edit. Here is my example for you anyway, can be resized infinitely :) — misterManSam
– misterManSam, Commented May 1, 2015 at 6:57
@SherwinFlight - Certainly is, do you want something like this example? — misterManSam
– misterManSam, Commented May 1, 2015 at 7:34

Harry · Accepted Answer · 2015-05-01 06:41:46Z

41

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>

edited May 1, 2015 at 6:41

answered May 1, 2015 at 6:20

Harry

90.1k26 gold badges216 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Harry Over a year ago

@SherwinFlight: Welcome mate. I have also added a sample for getting the exact appearance as in the image (with only 1 element). One thing that has to be noted is that since we are doing a skew, the slanted border would be a little thin but that can be overcome by making that border thicker than the other.

Sherwin Flight Over a year ago

Would you happen to know how to "cut off" the top left corner of a DIV? For example, so that it looks like a piece of paper with the top left corner folded back, or removed.

Harry Over a year ago

Is the background a solid color? If yes, you could use a triangle and place it at the top. If not, it still can be achieved but would need some extra work.

Harry Over a year ago

Then you could use linear-gradient like in this pen. It uses a transparent gradient for the top 20px and then the actual background required for the content for the rest. This would work even if the page background is an image or another gradient.

misterManSam Over a year ago

Was working on exactly same idea as @Harry before I saw his edit. Here is my example for you anyway, can be resized infinitely :)

|

dreamitcodeit · Accepted Answer · 2025-06-12 15:32:49Z

This is a CSS only solution I modified from some CSS I am using to annotate custom origami forms. The only parts that are really need are a container that is positioned relative and the div for the line itself. » Try It! The image, below contains multiple uses of this technique.

    <div class='border'>
      <div class='origamiSheet'>
          <div class='rotatedLine'></div>
      </div>
    </div>

    /* Prepare a holder so the example will stand out */
    .border {
       padding             : 2em;
       position            : relative;
    }
    
    /* Prepare a square so the line will stand out */
    
    .origamiSheet {
         width             : 3in;;
          min-width        : 3in;;
          max-width        : 3in;;
          height           : 3in;
          min-height       : 3in;
          max-height       : 3in;
          border           : 1px dotted black;
          background-color : gold;
    }
    
    /* Draw a line using ONLY CSS */
    .rotatedLine {
       background-color    : black;
       transform           : rotate(45deg);
       transform-origin    : center;
       position            : absolute;
       left                : -in;
       top                 : 2.25in;
       width               : 2.1in;
       min-width           : 2.1in;
       max-width           : 2.1in;
       height              : 1px;
       min-height          : 1px;
       max-height          : 1px;
    }

Collectives™ on Stack Overflow

Drawing angled lines in CSS

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related