Creating a Diagonal Line/Section/Border with CSS

Creating a diagonal line/section/border with CSS

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>

Div with diagonal bottom border

You can try the use of skew transformation like below:

.container {  width: 300px;  height: 200px;  background: url(https://picsum.photos/id/1002/800/800) center/cover;  overflow: hidden;}
.box {  height: 70%;  border-bottom: 10px solid red;  transform: skewY(-15deg);  transform-origin: left;  position: relative;  overflow: hidden;}
.box:before {  content: "";  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background: url(https://picsum.photos/id/12/800/800) center/cover;  transform: skewY(15deg);  transform-origin: left;}

<div class="container">  <div class="box">
  </div></div>

Adding diagonal borders to bottom/top of div element?

You could use SVG for this. Below is a short example, which can probably be simplified, I use SVG very rarely and am not that proficient with it.

body {  background-image: url(http://i.imgur.com/XxGffrU.jpg);  background-size: cover;  background-position: center bottom;  margin: 0;}#your_div {  position: relative;  top: 100px;  margin-top: 100px;  width: 100%;  height: 100px;  background: white;}#back {  position: relative;  top: -99px;  width: 100%;  height: 100px;}

<div id="your_div">  <svg id="back" viewBox="0 0 100 10" preserveAspectRatio="none">    <path d="M 0,4 L 45,8 50,5 55,8 100,4 100,10 0,10 z" style="fill: white;"></path>    <path d="M 0,0 L 45,8 55,8 100,0 100,10 0,10 z" style="fill: rgba(255,255,255,0.5)"></path>  </svg></div>

How to draw diagonal lines with css

You can achieve the desired effect by using just one single div. Check the DEMO.

div{
  border:1px solid gray;
  width:28px;
  height:28px;
  position:relative;
}

div:after{
  content:"";
  position:absolute;
  border-top:1px solid red;
  width:40px;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
}

Note: please add the vendor prefix for older browsers i.e. -moz, -webkit.

How makes a diagonal border in css in three parts

This is quite a tricky one. The hard part is to connect the path. With my pure CSS solution below you have to fine-tune the result, I am afraid.

You may want to consider creating an SVG instead.

With an SVG

.container {
  width: 400px;
  height: auto;
}

.lines {
  stroke: #888888;
  stroke-width: 1px;
  stroke-opacity: 1;
  fill: none;
}

<div class="container">
  <svg class="lines" viewbox="0 0 400 100" preserveAspectRatio="xMidYMin">
    <path d="M 0 99 A 150 10 0 0 0 200 90 M 199.8 90 L 220 1 M 220 1 H 400 M 400 1 Z" />
  </svg>
</div>

Diagonal border line with (inline) CSS

Here's a copy of your image using the linear-gradient CSS approach. MUCH less markup required :)

div#wrapper {  float: left;  width: 220px;  height: 220px;  margin: 0px;}
div#wrapper div {  width: 100px;  height: 100px;  float: left;  background: red;  margin: 0px 10px 10px 0px;}
div#wrapper #d1 {  background-image: repeating-linear-gradient(145deg, black, black 60px, white 60px, white 80px);}
div#wrapper #d4 {  background: black;}

<div id="wrapper">  <div id="d1"></div>  <div id="d2"></div>  <div id="d3"></div>  <div id="d4"></div></div>

draw diagonal lines in div background with CSS

You can do it something like this:

<style>
    .background {
        background-color: #BCBCBC;
        width: 100px;
        height: 50px;
        padding: 0; 
        margin: 0
    }
    .line1 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid red;
        -webkit-transform:
            translateY(-20px)
            translateX(5px)
            rotate(27deg); 
        position: absolute;
        /* top: -20px; */
    }
    .line2 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid green;
        -webkit-transform:
            translateY(20px)
            translateX(5px)
            rotate(-26deg);
        position: absolute;
        top: -33px;
        left: -13px;
    }
</style>
<div class="background">
    <div class="line1"></div>
    <div class="line2"></div>
</div>

Here is a jsfiddle.

Improved version of answer for your purpose.

CSS Diagonal border input fields

I love Ilya's skew solution. Super creative.

Here's an option using some :after pseudo-elements and CSS triangles to create the skewed effect. To achieve the desired effect we add :after pseudo elements to the right-side of the left inputs, and to the left-side of the right input/button.

Here's the end effect:

Sample Image

.container {  display: flex;  flex-direction: column;  background-color: #565452;  padding: 20px;}
.row {  display: flex;}
.row:not(:last-child) {  margin-bottom: 60px;}
.field {  width: calc(100% - 10px);  position: relative;  background-color: #565452;}
.field:first-child {  margin-right: 30px;}
.field:after {  content: "";  display: block;  position: absolute;  top: 0;  width: 0px;  height: 0px;}
.field:first-child:after {  right: -15px;  border-top: 60px solid #ffffff; border-right: 15px solid transparent;}
.field:last-child:after {  left: -15px;  border-bottom: 60px solid #ffffff; border-left: 15px solid transparent;}
.field.field--button { flex-basis: 25%;}
.field.field--button:after {  border-bottom: 60px solid #F9D838;}
.input {  border: none;  line-height: 60px;  outline: none;  padding: 0 15px;  width: 100%;  box-sizing: border-box;  background-color: #ffffff;  font-size: 18px;}
.input::placeholder {  color: #cccccc;}
.button {  background-color: #F9D838;  color: #ffffff;  border: none;  outline: none;  line-height: 60px;  font-size: 30px;  width: 100%;  padding: 0 30px 0 20px;  text-transform: uppercase;}

<form>  <div class="container">    <div class="row">      <div class="field">        <input class="input" placeholder="Voornaa m" />      </div>      <div class="field">        <input class="input" placeholder="Achternaa m" />      </div>    </div>    <div class="row">      <div class="field">        <input class="input" placeholder="E-mail" />      </div>      <div class="field field--button">        <button class="button" type="submit">Go</button>      </div>    </div>  </div></form>

Create diagonal border of a cell

Anything is possible if you fiddle around with it long enough, here's an example using some creative borders and a lot of CSS:

.arrow_box:after, .arrow_box:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

FIDDLE

And another one using CSS3 rotate:

-webkit-transform: rotate(26.5deg);
   -moz-transform: rotate(26.5deg);
    -ms-transform: rotate(26.5deg);
     -o-transform: rotate(26.5deg);
        transform: rotate(26.5deg);

FIDDLE

or you could just use an image as the background for your table.

Creating a Diagonal Line/Section/Border with CSS