Can I do a diagonal line in CSS?

Question

I want a design like this:

So in fact a left side with background-color, a right side with background-color (divs of course, easy).

But can I do a diagonal line with CSS?

possible duplicate of [Separate 2 div's with slope line](http://stackoverflow.com/questions/24777156/separate-2-divs-with-slope-line) — web-tiki, Aug 18 '14 at 08:35

score 4 · Accepted Answer · answered Aug 18 '14 at 08:32

You can achieve this shape with a skewed pseudo element :

DEMO

HTML :

<div>
    <h1>Your title here</h1>
</div>

CSS :

div{
    padding:0 10px 10px;
    background:#E7E5DD;

}
h1{
    margin:0;
    display:inline-block;
    position:relative;
    z-index:1;
    padding:10px 50px 10px;
    overflow:hidden;
}
h1:before{
    content:'';
    width:100%; height:100%;
    position:absolute;
    top:0; left:0;
    background:#fff;
    z-index:-1;

    -webkit-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    transform: skewX(-20deg);

    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
}

Zlatin Zlatev · Answer 2 · 2014-08-18T07:56:13.940

3

If you want to have with with pure CSS - see

(You would need a white top-left triangle on the gray area)

width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #fff transparent transparent transparent;

Please note that some browsers will not use anti-aliasing when drawing the borders.

A simpler approach in this case would be to have images for background - one for the text with the diagonal line, another one for the grey area.

edited Aug 18 '14 at 07:56

answered Aug 18 '14 at 07:50

Zlatin Zlatev

3,034
1
24
32

Please post Code examples, cause the content of the links could be change – Webice Aug 18 '14 at 07:52
2

This is a wide-known principle of making triangles with CSS. If the content of the links changes, google search on "CSS triangle" would do. – Zlatin Zlatev Aug 18 '14 at 07:53
Thanks for the Code Example. I know how to google, but the most people here dont google ... they ask directly – Webice Aug 18 '14 at 07:55

score 2 · Answer 3 · edited May 23 '17 at 12:24

http://jsfiddle.net/nuxcbqqq/1/

<div class="crossed"></div>

.crossed {
width: 100px;
height: 100px;
background: 
   linear-gradient(to top left,
       rgba(0,0,0,0) 0%,
       rgba(0,0,0,0) calc(50% - 0.8px),
       rgba(0,0,0,1) 50%,
       rgba(0,0,0,0) calc(50% + 0.8px),
       rgba(0,0,0,0) 100%),
   linear-gradient(to top right,
       rgba(0,0,0,0) 0%,
       rgba(0,0,0,0) calc(50% - 0.8px),
       rgba(0,0,0,1) 50%,
       rgba(0,0,0,0) calc(50% + 0.8px),
       rgba(0,0,0,0) 100%);
}

Code from here draw diagonal lines in div background with CSS

Can I do a diagonal line in CSS?

3 Answers3