如何用线性渐变绘制完美的对角线
How to draw a perfect diagonal with linear-gradient
我想用 linear-gradient
画一条像样的对角线,但是当容器很小的时候我不知道该怎么做>我想画一条适合 10x10px 容器的对角线并且看起来像这样:
这是我最好的尝试。
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>
我做错了什么?
您可以使用 ::after
伪 class 来做到这一点。
div{
width:28px;
height:28px;
position:relative;}
div:after{
content:"";
position:absolute;
border-top:1px solid red;
width:40px;
transform: rotate(45deg);
transform-origin: 0% 0%;
}
<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>
您的方法没有错,但是在创建对角线时最好避免使用 angular 线性渐变,因为 angular 线性渐变并不总是产生对角线。根据容器的尺寸,生成的线可以是对角线(或)框内任意位置的线。您可以在 中找到更多相关信息。使用 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>
提供了如何使用 SVG 对角线作为背景图像的演示 here。 SVG 图像也可以叠加在其他背景图像之上。
白线
方向: 上,左 => 下,右
.line {
background: linear-gradient(
45deg,
transparent,
transparent 45%,
#fff 45%,
#fff 55%,
transparent 55%,
transparent 100%
);
}
我想用 linear-gradient
画一条像样的对角线,但是当容器很小的时候我不知道该怎么做>我想画一条适合 10x10px 容器的对角线并且看起来像这样:
这是我最好的尝试。
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>
我做错了什么?
您可以使用 ::after
伪 class 来做到这一点。
div{
width:28px;
height:28px;
position:relative;}
div:after{
content:"";
position:absolute;
border-top:1px solid red;
width:40px;
transform: rotate(45deg);
transform-origin: 0% 0%;
}
<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>
您的方法没有错,但是在创建对角线时最好避免使用 angular 线性渐变,因为 angular 线性渐变并不总是产生对角线。根据容器的尺寸,生成的线可以是对角线(或)框内任意位置的线。您可以在 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>
提供了如何使用 SVG 对角线作为背景图像的演示 here。 SVG 图像也可以叠加在其他背景图像之上。
白线
方向: 上,左 => 下,右
.line {
background: linear-gradient(
45deg,
transparent,
transparent 45%,
#fff 45%,
#fff 55%,
transparent 55%,
transparent 100%
);
}