20

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

Harry
  • 87,580
  • 25
  • 202
  • 214
Sherwin Flight
  • 2,345
  • 7
  • 34
  • 54

1 Answers1

40

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>
Harry
  • 87,580
  • 25
  • 202
  • 214
  • 1
    @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. – Harry May 01 '15 at 06:35
  • 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. – Sherwin Flight May 01 '15 at 06:44
  • 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 May 01 '15 at 06:45
  • No, the background is not a solid colour. :( – Sherwin Flight May 01 '15 at 06:47
  • 1
    Then you could use `linear-gradient` like in [this pen](http://codepen.io/hari_shanx/pen/xGGPrL?editors=010). 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. – Harry May 01 '15 at 06:49
  • 1
    Was working on exactly same idea as @Harry before I saw his edit. [Here is my example for you anyway](http://jsbin.com/vaweju/1/edit?html,css,output), can be resized infinitely :) – misterManSam May 01 '15 at 07:00
  • In your top example css what is causing the line to only angle at the end as apposed from the start which is what I need? – Cesar Bielich Jun 13 '17 at 21:14