gpt4 book ai didi

html - 如何在不使用图像的情况下创建线条

转载 作者:太空宇宙 更新时间:2023-11-04 14:32:26 25 4
gpt4 key购买 nike

我试图在不使用图像的情况下创建下图(显然没有 ASCII 字符和实线)。我该怎么办?我一直在考虑 canvas 或 CSS3,除非有更好的东西。

 \                       /
\ /
---------------------
/ \
/ \

最佳答案

有多种方法可以实现所提供的效果,下面提供了其中一些的片段。每个都有自己的优点和缺点,因此请根据您的要求选择其中一个。

使用 CSS 转换:

我们可以对两个伪元素使用 CSS 透视变换,每个伪元素大约是父元素高度的 50%。伪元素相对于父元素绝对定位,它们的边框产生线条。 (用于定位 span 的方法是随机的,您可以使用任何您觉得舒服的方法。)

在设计响应式形状时,透视变换可能非常难以处理。随着容器尺寸的变化,我们将不得不修改 margin。形状的其他部分会消失。很难确定运行时的边际值应该是多少。

.shape{
position: relative;
height: 100px;
width: 200px;
margin: 20px;
}
.shape:after, .shape:before{
position: absolute;
content: '';
left: 0px;
height: calc(50% - 1px);
width: 100%;
border-style: solid;
}
.shape:before{
top: 0;
border-width: 0px 2px 1px 2px;
transform: perspective(50px) rotateX(-10deg);
transform-origin: bottom;
}
.shape:after{
bottom: 0;
border-width: 1px 2px 0px 2px;
transform: perspective(50px) rotateX(10deg);
transform-origin: top;
}
span{
display: block;
position: absolute;
top: 50%;
}
span:nth-child(1){
left: 50%;
}
span:nth-child(2){
left: 50%;
transform: translateY(-100%);
}
span:nth-child(3){
left: 0%;
transform: translateY(-50%) translateX(-150%);
}
span:nth-child(4){
right: 0%;
transform: translateY(-50%) translateX(200%);
}
<div class='shape'>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>

使用 SVG:

使用 SVG,我们可以使用 moveTo (M) 和 line (L) 命令绘制一条 path 来生成线条。片段中使用的 SVG 绘图命令非常简单且不言自明。我们只是移动到一个点(由 X 和 Y 坐标表示),然后从该点到其他指定点画线。同样,SVG 相对于父级绝对定位。

SVG 设计为默认响应式,即使容器的尺寸发生变化也能很好地适应。需要注意的主要一件事是路径的笔划也会缩放。因此,当容器的高度和宽度发生变化而不保持原始比例时(也就是说,高度单独增加),那么笔划的某些部分会变得比其余部分更粗(也就是说,如果高度单独变化,那么水平线变粗)。这可以通过添加属性 vector-effect='non-scaling-stroke' 来解决,但这不受 IE 支持。

.shape {
position: relative;
height: 100px;
width: 200px;
margin: 20px;
}
svg {
position: absolute;
height: 100%;
width: 100%;
}
path {
stroke: black;
stroke-width: 2;
fill: none;
}
span {
display: block;
position: absolute;
top: 50%;
}
span:nth-of-type(1) {
left: 50%;
}
span:nth-of-type(2) {
left: 50%;
transform: translateY(-100%);
}
span:nth-of-type(3) {
left: 0%;
transform: translateY(-50%) translateX(-50%);
}
span:nth-of-type(4) {
right: 0%;
transform: translateY(-50%) translateX(50%);
}
<div class='shape'>
<svg viewBox='0 0 200 100' preserveAspectRatio='none'>
<path d='M0,0 L20,50 0,100 20,50 180,50 200,0 180,50 200,100' vector-effect='non-scaling-stroke' />
</svg>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>

使用 Canvas :

Canvas 绘图命令与 SVG 非常相似,在这里我们可以再次使用 moveTolineTo 命令绘制一个 path 来生成线。我们只是移动到一个点(由 X 和 Y 坐标表示),然后从该点到其他指定点画线。在这里,Canvas 相对于父对象是绝对定位的。

Canvas 绘图是基于光栅的(不同于基于矢量的 SVG),因此默认情况下它不是响应式的。缩放时,Canvas 绘图会变得模糊(像素化),并且在容器尺寸发生变化时需要重新绘制。当容器的尺寸不固定时,这使得它不太适合使用。

window.onload = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.lineWidth = '2';

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(20,50);
ctx.lineTo(0,100);
ctx.lineTo(20,50);
ctx.lineTo(180,50);
ctx.lineTo(200,0);
ctx.lineTo(180,50);
ctx.lineTo(200,100);
ctx.stroke();
}
.shape {
position: relative;
height: 100px;
width: 200px;
margin: 20px;
}
canvas{
position: absolute;
}
svg {
position: absolute;
height: 100%;
width: 100%;
}
path {
stroke: black;
stroke-width: 2;
fill: none;
}
span {
display: block;
position: absolute;
top: 50%;
}
span:nth-of-type(1) {
left: 50%;
}
span:nth-of-type(2) {
left: 50%;
transform: translateY(-100%);
}
span:nth-of-type(3) {
left: 0%;
transform: translateY(-50%) translateX(-50%);
}
span:nth-of-type(4) {
right: 0%;
transform: translateY(-50%) translateX(50%);
}
<div class='shape'>
<canvas id='canvas' height='100px' width='200px'></canvas>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>

关于html - 如何在不使用图像的情况下创建线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32875712/

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