在元素中创建响应对角线
答
您可以以多种方式做到这一点。
1)背景图像
1.1)SVG
可以创建一个SVG直接作为内联代码,并使用它用于绘制线。使用这个,你可以达到很好的效果,如阴影,渐变,虚线,等等。在css background-image元素中使用svg也是可行的。
<svg style='width: 100%; height: 100%;'>
<line x1="0" y1="100%" x2="100%" y2="0"
style="stroke:rgb(0,0,0);stroke-width:1"/>
</svg>
1.2)修复图像(PNG,JPG,...)
你也可以使用一个简单的图像作为背景图像上满格。
2)创建线性渐变背景
.testDiv {
width: 300px;
height: 300px;
background:linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%);
}
这是如何工作的?
- 定义从左上角的梯度到右下
- 颜色是透明,直到50% - 1个像素和从50%再次透明结束
(读更多here)
3)旋转内的div(仅在正方形的div)
当调整testDiv的大小时,行应保持对角线。
.testDiv{
width: 600px;
height: 600px;
background-color: gray;
}
.lineDiv {
position: relative;
top: 29%;
left: 29%;
width: 142%;
height: 142%;
border-left: solid thin blue;
transform: rotate(45deg);
}
这是如何工作的?
- 外div有一个尺寸(可以是动态的太)
- 内div有位置相对的,并且宽度和高度被设置为
- 顶部和左侧设定为29%142%(28.7)
- > 142 = SQRT(100^2 + 100^2)(见phytagoras)
答
背景图片应该做的:
body {
background:linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%) yellow;
/*demo purpose */
height:50%;
width:50%;
margin:auto;
}
html {
display:flex;
height:100vh;
background:white;
}
/* end demo purpose */
运行段整页和调整窗口的浏览器测试行为
嗯,SVG溶液完全适用于我的需要。谢谢! – mikeriley131