html - CSS 对 Angular 线 - 如何适应其父元素？

Question

我怎样才能使对 Angular 线填充并适合一个盒子(只是纯 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

你可以添加一个 linear-gradient background 并抛弃内部元素，将该类添加到另一个 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>