Creating a diagonal line/section/border with CSS

Question

I am trying to create a diagonal line on a webpage, to act as a section/section break. This is essentially a split colour section. I cant use an image as if the page gets enlarged, the image is going to pixelate. So i need to be able to draw a diagonal line directly at the bottom of the div, like the image below.

I have tried using a border, however i cannot get the actual break to be in the middle, rather than the right or left hand side.

Is there a way to draw diagonal lines in CSS? As you can see, i need to create a div that is 90px high and have the split/diagonal line in that div. I can then have a look at adding the image, but the main issue is not knowing whether this is possible with CSS.

Diagonal section separator

_“I cant use an image as if the page gets enlarged, the image is going to pixelate”_ – so you never heard of SVG then …? — CBroe, Mar 12 '15 at 19:59

web-tiki · Accepted Answer · 2015-03-12T17:59:09.430

27

With an svg, it is pretty simple :

svg {
  display: block;
  width: 100%;
  height: 90px;
  background: yellow;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
  <polygon points="100 0 100 10 0 10" />
</svg>

Note that I used the preserveAspectRatio="none" attribute so that the shape can have 100% width and keep 90px height

And here with a monkey image :

div {
  position: relative;
}
svg {
  display: block;
  width: 100%;
  height: 90px;
  background: yellow;
}
img {
  height: 50px;
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  background: #fff;
  border-radius: 50%;
  padding: 10px;
}

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
    <polygon points="100 0 100 10 0 10" />
  </svg>
  <img src="http://images.clipartpanda.com/monkey-clipart-black-and-white-16981-monkey-face-svg.svg" alt="" />
</div>

edited Mar 12 '15 at 17:59

answered Mar 12 '15 at 17:34

web-tiki

99,765
32
217
249

@DomGreensladeBSc this works in latest FF and according to canIuse it should also work on much older versions. Can you elaborate please? – web-tiki Mar 13 '15 at 15:11
Sorry, on something completely different. What if i wanted to invert this? In terms of the polygon that is. I have updated the image on the main question, i attempted to draw a polygon, but cant see how this works. – Dom Greenslade BSc Mar 16 '15 at 16:08
1

@DomGreensladeBSc the easiest would be to invert the colors like this http://jsfiddle.net/webtiki/3ku7npf8/ – web-tiki Mar 16 '15 at 16:10
Sorry, i meant almost invert the polygon like the image in the question now. – Dom Greenslade BSc Mar 16 '15 at 16:12
@DomGreensladeBSc if you want it like the image you edited into the question, see this http://jsfiddle.net/webtiki/3ku7npf8/1/ – web-tiki Mar 17 '15 at 19:16
how do you go about changing the colour of the bottom part of the segment? – Dom Greenslade BSc Apr 16 '15 at 15:55
@DomGreensladeBSc just change the svg background color in the CSS. – web-tiki Apr 16 '15 at 15:57
@DomGreensladeBSc the top color is controled by the `fill` attribute in the markup and the bottom one is controled by the background color in the CSS http://jsfiddle.net/3ku7npf8/2/ – web-tiki Apr 17 '15 at 10:43

Adjit · Answer 2 · 2015-03-13T14:10:16.723

17

You can do this without any clipping and just using borders in a unique way. This should also be cross-browser compatible, but I haven't tested it across everything

Initially divided this into 2 separate divs / triangles and joined them, but thanks to web-tiki and kaiido perfected it to use only 1 div and minimal CSS

*{
  border: 0;
  padding: 0;
  margin: 0;
}

#gradient {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 100vw 0 0;
  border-color: yellow black transparent transparent;
  transform: scale(1.0001);
}

<div id="gradient"></div>

Original Answer using multiple divs:

*{
  border: 0;
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  position: relative;
}

#container div {
  position: absolute;
}

#top-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 100vw 0 0;
  border-color: yellow transparent transparent transparent;
}

#bottom-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 90px 100vw;
  border-color: transparent transparent black transparent;
}

<div id="container">
  <div id="top-triangle"></div>
  <div id="bottom-triangle"></div>
</div>

edited Mar 13 '15 at 14:10

answered Mar 12 '15 at 17:11

Adjit

10,134
12
53
98

2

why use three divs when only one is enough? http://jsfiddle.net/webtiki/jLa8sfp7/ – web-tiki Mar 12 '15 at 17:20
1

I would add to @web-tiki that you can also add a `transform: scale(1.0001);`to remove that crispy edge : http://jsfiddle.net/jLa8sfp7/3/ – Kaiido Mar 12 '15 at 17:28
@web-tiki oh yeah - good point. For some reason I just didn't think about that - instead I was thinking of it from the standpoint of joing 2 triangles. – Adjit Mar 12 '15 at 19:51
I did this, and the line looked really really jagged. – Dom Greenslade BSc Mar 13 '15 at 12:16
@DomGreensladeBSc did you add the `transform: scale(1.001)`? If you did, then you can use my original answer which does a better job of removing the jaggedness. – Adjit Mar 13 '15 at 14:08
This solution only works good on fullscreen divs. If used inside a smaller div, it doesn't fit the parent width. – Jacopo Pace Nov 23 '22 at 16:49

score 8 · Answer 3 · answered Mar 12 '15 at 16:58

8

Use a linear gradient

div {
  height: 90px;
  background-image: linear-gradient(to bottom right, yellow, yellow 50%, black 50%, black);
}

<div></div>

answered Mar 12 '15 at 16:58

Paulie_D

107,962
13
142
161

score 6 · Answer 4 · answered Mar 12 '15 at 17:06

You can use CSS3 clip:

.yellow {
  width: 100%;
  height: 90px;
  background: yellow;
  -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}
.black {
  width: 100%;
  height: 90px;
  background: black;
  -webkit-clip-path: polygon(100% 0, 0 100%, 100% 99%);
  clip-path: polygon(100% 0, 0 100%, 100% 99%);
  margin-top: -90px;
}

<div class="yellow"></div>
<div class="black"></div>

Demo: http://jsfiddle.net/zLkrfeev/2/

It's not widely supported by the browsers: http://caniuse.com/#feat=css-clip-path

score 0 · Answer 5 · answered Oct 13 '18 at 11:49

if you want to put diagonal border in column you can do it this way and its 100% responsive. your requirement might be different though. I put it transparent image which contains white diagonal border in that section's right column.

<div id="wrapper">
  <div class="h-row">
    <div class="h-left">
    </div>
    <div class="h-right">
      <div class="hr-box"></div>
    </div>
  </div>
</div>

<style>
.h-row{display: table; table-layout: fixed; height: 100%; width: 100%;}
.h-left,
.h-right{display: table-cell; vertical-align: top; height:250px;}/*height is just for demo purpose you can remove it ofcourse and fill the content */ 
.h-left{background: #e9eae2; padding: 50px 83px 15px 165px; width: 69%;}
.h-right{background: #7acec3 url('https://previews.dropbox.com/p/thumb/AAMv9WREPIx2AXUVhzCrK5Hl1jxf3ofX0teck9P94bG_SCjB28QPmKqXuchYyjp_xFMjMrGLzRYHh0O9wBOZJMZW9L_97lScKB22dgco9eGMJ1PCBbFepUcDkPg3aUE_1ONik2rKQ2SgRvtUgdq8nA_Ev1gxLxq8yWcXNKOdxKGBNOqe4FTHnbAgGy-JD4UtwZliw8c0fmNah8rydlD4JetFxNubkUyW4I_Q-XRL5qjW9A/p.png?size=1280x960&size_mode=3') no-repeat center center/ 100% 100%; padding: 50px 165px 15px 0; width: 31%; position: relative;}
.h-left .row{margin:0 -44px;}
</style>

https://codepen.io/neel555nc/pen/LgjoOg

score -1 · Answer 6 · answered Mar 12 '15 at 16:59

You can do this using a gradient.

body {
  height: 200px;
  margin: 0 0 20px 0;
  background-color: transparent;
  background-size: 20px 20px;
  background-image:
     -webkit-repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
  background-image:
     -moz-repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
  background-image:
     -o-repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
  background-image:
     repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
}

JSFiddle

Creating a diagonal line/section/border with CSS

6 Answers6

Linked

Related