CSS 对角线 - 如何适应其父元素?
CSS diagonal lines - how to fit into its parent element?
我怎样才能使对角线填充并适合一个盒子(只是纯粹的 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>
结果:
另外,是否可以只拥有一个元素而不包裹它?例如:
<div class="to-right"></div>
<div class="to-right"></div>
<div class="to-left"></div>
可能吗?
试试这个作为你的 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;
}
可以用伪元素画线
.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>
我的做法:
- 对容器使用
position: relative
,对行使用 position: absolute
。
- 左行使用
transform-origin: left
和left: 0
,右行使用transform-origin: right
和right: 0
。
- 如果容器的
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;
}
您可以添加一个 linear-gradient
background
并放弃内部元素,将 class 添加到另一个 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>
最好使用 SVG,它提供了很好的响应式对角线,几乎适用于所有浏览器。
.box {
width: 20rem;
height: 10rem;
background-color: hsla(0, 0%, 70%, 0.3);
cursor: pointer;
position: relative;
}
.svg-stroke {
position: absolute;
width: 100%;
height: 100%;
}
<div class="box">
<svg class='svg-stroke' viewBox='0 0 10 10' preserveAspectRatio='none'>
<line x1='10' y1='0' x2='0' y2='10' stroke='red' stroke-width='.2' stroke-opacity='0.2' />
</svg>
</div>
我怎样才能使对角线填充并适合一个盒子(只是纯粹的 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>
结果:
另外,是否可以只拥有一个元素而不包裹它?例如:
<div class="to-right"></div>
<div class="to-right"></div>
<div class="to-left"></div>
可能吗?
试试这个作为你的 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;
}
可以用伪元素画线
.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>
我的做法:
- 对容器使用
position: relative
,对行使用position: absolute
。 - 左行使用
transform-origin: left
和left: 0
,右行使用transform-origin: right
和right: 0
。 - 如果容器的
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;
}
您可以添加一个 linear-gradient
background
并放弃内部元素,将 class 添加到另一个 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>
最好使用 SVG,它提供了很好的响应式对角线,几乎适用于所有浏览器。
.box {
width: 20rem;
height: 10rem;
background-color: hsla(0, 0%, 70%, 0.3);
cursor: pointer;
position: relative;
}
.svg-stroke {
position: absolute;
width: 100%;
height: 100%;
}
<div class="box">
<svg class='svg-stroke' viewBox='0 0 10 10' preserveAspectRatio='none'>
<line x1='10' y1='0' x2='0' y2='10' stroke='red' stroke-width='.2' stroke-opacity='0.2' />
</svg>
</div>