gpt4 book ai didi

css - 如何用线性渐变绘制完美的对 Angular 线

转载 作者:行者123 更新时间:2023-11-28 09:57:56 24 4
gpt4 key购买 nike

我正在尝试使用 linear-gradient 绘制一条像样的对 Angular 线,但我无法弄清楚当容器很小时该怎么做> 我正在尝试获得适合内部的对 Angular 线10x10px 容器,看起来像这样:

enter image description here

这是我最好的尝试。

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] 线性渐变,它是透明的,除了对 Angular 线的粗细,如下面的代码片段所示。

(边框只是为了演示而添加的,实际上并不是渐变工作所必需的。)

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 线性渐变,因为 Angular 线性渐变并不总是产生对 Angular 线。根据容器的尺寸,生成的线可以是对 Angular 线(或)框内任意位置的线。您可以在 my answer here 中找到更多相关信息。 .使用 to [side][side] 渐变的另一个优点是它是响应式的。


如果渐变不适合你,那么你可以看看使用 SVG,但我认为你不能创建具有精确粗细的线条,当涉及到对 Angular 线时。创建对 Angular 线不像直线那么简单。

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 对 Angular 线作为背景图像的演示可用 here . SVG 图像也可以叠加在其他背景图像之上。

关于css - 如何用线性渐变绘制完美的对 Angular 线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37628208/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com