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

Question

我试图在不使用图像的情况下创建下面的图表(显然没有ASCII字符和实线).我该怎么办呢？除非有更好的东西,否则我会想到画布或CSS3.

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

Answer 1

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

使用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,我们可以path使用moveTo(M)和line(L)命令来绘制线条.代码段中使用的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:

画布绘制命令与SVG命令非常相似,我们再次path使用moveTo和lineTo命令绘制生成线条.我们只是移动到一个点(由X和Y坐标表示),然后从该点到其他指定点绘制线条.同样,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>