我怎样才能使对 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>
这可能吗?
最佳答案
你可以添加一个 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>
关于html - CSS 对 Angular 线 - 如何适应其父元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42353538/