Диагональные линии CSS - как вписаться в свой родительский элемент?

Question

Как сделать диагональную линию заполнять и вставлять в ящик (просто чистый css - без использования фонового изображения)?

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>

Результат:

jsfiddle.

Кроме того, возможно ли иметь элемент только без его обертывания? Например:

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

Возможно ли это?

Answer 1

Вы можете рисовать линии с псевдо элементы.

.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 2

Попробуйте это как ваш 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; 
} 

Answer 3

Мой подход:

1. Использование position: relative в контейнер и position: absolute для линий.
2. Используйте transform-origin: left и left: 0 для левой линии, transform-origin: right и right: 0 для правой линии.
3. Если width и height контейнера равны, то ширина линии будет равна ~ 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>

Если вы использовали CSS препроцессор (LESS, например), вы могли бы сделать что-то вроде этого:

@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 4

Вы можете добавить a linear-gradientbackground и канаву i nner элемент, добавить этот класс в другой 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>