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

Question

我试图在不使用图像的情况下创建下图(显然没有 ASCII 字符和实线)。我该怎么办？我一直在考虑 canvas 或 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，我们可以使用 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 非常相似，在这里我们可以再次使用 moveTo 和 lineTo 命令绘制一个 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>