CSS diagonal lines - how to fit into its parent el

Question

How can I make a diagonal line fill in and fit into a box (just pure css - without any use of background image)?

div.diagonal-container {
    border: 1px solid #000;
    width:400px;
    height:400px;
    margin: 0 auto;
}

.to-right,
.to-left {
    border-top:1px solid #ff00ff;
    width:100%;

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

.to-right {
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

<div class="diagonal-container" style="">
    <div class="to-right"></div>
</div>

<div class="diagonal-container" style="">
    <div class="to-right"></div>
</div>

<div class="diagonal-container" style="">
    <div class="to-left"></div>
</div>

Result:

jsfiddle.

Also, is it possible to have an element only without wrapping it? For instance:

<div class="to-right"></div>
<div class="to-right"></div>
<div class="to-left"></div>

Is it possible?

Answer 1

You can add a linear-gradient background and ditch the inner element, add that class to the other div

div.diagonal-container {
  border: 1px solid #000;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

.to-right {
  background: linear-gradient(135deg, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px) );
}

.to-left {
  background: linear-gradient(45deg, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px) );
}

<div class="diagonal-container to-right"></div>

<div class="diagonal-container to-right"></div>

<div class="diagonal-container to-left"></div>

Answer 2

My approach:

1. Use position: relative to the container and position: absolute for the lines.
2. Use transform-origin: left and left: 0 for the left line, transform-origin: right and right: 0 for the right line.
3. If width and height of the container are equal, then the width of the line'll be ~141.5%.

.diagonal-container {
    border: 1px solid #000;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    position: relative;
}

.to-right, .to-left {
    border-top: 1px solid #ff00ff;
    width: 141.5%;
    position: absolute;
    top: 0;
}

.to-left {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    left: 0;
}

.to-right {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    right: 0;
}

<div class="diagonal-container">
    <div class="to-right"></div>
</div>

<div class="diagonal-container">
    <div class="to-right"></div>
</div>

<div class="diagonal-container">
    <div class="to-left"></div>
</div>

If you used a CSS preprocessor (LESS for example), you'd do something like this:

@width: 400px;
@height: 400px;

.rotate(@angle, @origin) {
    -webkit-transform: rotate(@angle);
    -ms-transform: rotate(@angle);
    transform: rotate(@angle);
    -webkit-transform-origin: @origin;
    -ms-transform-origin: @origin;
    transform-origin: @origin;
}

.diagonal-container {
    border: 1px solid #000;
    width: @width;
    height: @width;
    margin: 0 auto;
    position: relative;
}

.to-right, .to-left {
    border-top: 1px solid #ff00ff;
    width: sqrt(@width*@width + @height*@height);
    position: absolute;
    top: 0;
}

.to-left {
    .rotate(45deg, left);
    left: 0;
}

.to-right {
    .rotate(-45deg, right);
    right: 0;
}

CodePen

Answer 3

You can draw the lines with pseudo elements.

.diagonal-container {
  border: 1px solid #000;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.diagonal-container:before {
  border-top: 1px solid #ff00ff;
  content: '';
  position: absolute;
  top: 0; left: 0; right: -50%;
  transform: rotate(45deg);
  transform-origin: 0 0;
}

.to-right:before {
  right: 0; left: -50%;
  transform: rotate(-45deg);
  transform-origin: 100% 0;
}

<div class="diagonal-container to-right">
</div>

<div class="diagonal-container to-left">
</div>

<div class="diagonal-container to-right">
</div>

Answer 4

Try this as your css:

div.diagonal-container {
  border: 1px solid #000;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}

.to-right,
.to-left {
  border-top: 1px solid #ff00ff;
  width: 100%;
}

.to-left {
    transform: rotate(45deg) scale(1.5);
    transform-origin: top left;
}

.to-right {
  transform: rotate(-45deg) scale(1.5);
  transform-origin: bottom right;
}