如何绘制线性渐变的完美对角线
该隐努克
我试图用绘制一个像样的对角线，linear-gradient但是当容器很小时我不知道该怎么做。
这是我最好的尝试。
div {
background: linear-gradient(50deg, transparent 4px, red 4px, red 5px, transparent 5px) no-repeat 0px 25px / 10px 10px;
display:block;
width:100px;
height:100px;
}<div></div>我做错了什么？
哈利
您可以使用to [side] [side]透明的线性渐变，除了对角线的粗细（如下面的代码片段所示）外。
（仅为演示添加了边框，渐变起作用时实际上并不需要添加边框。）
div {
display: block;
width: 100px;
height: 100px;
border: 1px solid;
margin: 10px;
}
.border-2px {
background: linear-gradient(to bottom left, transparent calc(50% - 2px), red calc(50% - 1px), red calc(50% + 1px), transparent calc(50% + 2px)) no-repeat 0px 0px / 100px 100px;
}
.border-1px {
background: linear-gradient(to bottom left, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px)) no-repeat 0px 0px / 100px 100px;
}
.border-1px.small {
height: 10px;
width: 10px;
background: linear-gradient(to bottom left, transparent calc(50% - .5px), red 50%, transparent calc(50% + .5px)) no-repeat 0px 0px / 10px 10px;
}
.border-1px.small-2 {
height: 10px;
width: 10px;
background: linear-gradient(to bottom left, transparent calc(50% - 1px), #EEE calc(50% - .5px), red 50%, #EEE calc(50% + .5px), transparent calc(50% + 1px)) no-repeat 0px 0px / 10px 10px;
}
.border-1px.small-3 {
background: linear-gradient(to bottom left, transparent calc(50% - .5px), red 50%, transparent calc(50% + .5px)) no-repeat 0px 0px / 10px 10px;
}
.border-1px.small-4 {
background: linear-gradient(to bottom left, transparent calc(50% - 1px), #EEE calc(50% - .5px), red 50%, #EEE calc(50% + .5px), transparent calc(50% + 1px)) no-repeat 0px 0px / 10px 10px;
}<div class='border-2px'></div>
<div class='border-1px'></div>
<div class='border-1px small'></div>
<div class='border-1px small-2'></div>
<div class='border-1px small-3'></div>
<div class='border-1px small-4'></div>您的方法没有错，但在创建对角线时最好避免角度线性梯度，因为角度线性梯度并不总是会产生对角线。根据容器的尺寸，产生的线可以是对角线（或）在箱子内任何地方的线。您可以在此处的答案中找到有关此信息的更多信息。使用to [side][side]渐变的另一个优点是它具有响应能力。
如果渐变对您不起作用，则可以使用SVG进行查看，但我认为在对角线时您无法根据需要创建具有精确粗细的线。对角线不像要创建的直线那么简单。
div {
position: relative;
height: 100px;
width: 100px;
}
svg {
position: absolute;
height: 10px;
width: 10px;
top: 0px;
left: 0px;
}
path {
stroke-width: 1.05;
stroke: red;
fill: none;
}<div>
<svg viewBox='0 0 10 10'>
<path d='M0,0 10,10' />
</svg>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何绘制线性渐变的完美对角线
- 2
如何多次获得线性渐变对角线效果？
- 3
如何绘制对角线div？
- 4
如何使用CSS绘制对角线
- 5
如何使用MSChart对角线绘制带状线？
- 6
如何用对角线和对角线文本绘制HTML表？
- 7
如何用对角线和对角线文本绘制HTML表？
- 8
如何在Graphviz中绘制对角线边缘
- 9
用对角线绘制UIView？
- 10
用Java绘制对角线
- 11
绘制我的matplotlib散点图的对角线？
- 12
画布中对角线到角线的渐变
- 13
如何制作对角线div
- 14
如何对角线分割图像？
- 15
如何检查主教的空对角线？
- 16
如何制作对角线div
- 17
如何找到对角线值
- 18
如何在控制台中绘制带有对角线的空心矩形
- 19
使用CSS在div背景中绘制对角线
- 20
在html5中绘制对角线
- 21
在 Android 中只绘制水平、垂直和对角线
- 22
视线对角线
- 23
映射对角线
- 24
如何使对角线和反向对角线与2D矩阵中的点交叉？
- 25
如何填充对角线并忽略R中矩阵的对角线？
- 26
线性渐变对角阴影
- 27
主对角线变成反对角线
- 28
更改矩阵中心对角线旁边的对角线
- 29
如何对角线连接盒子的阴影？
我来说两句