Question

我正在尝试在不使用图像的情况下创建下面的图表（显然没有ASCII字符和实线）。我该怎么办呢？除非有更好的东西，否则我会考虑使用canvas或CSS3。

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

Answer 1

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

使用CSS转换：

我们可以使用两个伪元素的CSS透视变换，每个伪元素大约是父高度的50％。伪元素相对于父元素绝对定位，并且它们上的边界产生线条。（用于定位span的方法只是随机的，你可以使用任何你觉得舒服的方法。）

在设计响应式形状时，透视变换可能非常棘手。随着容器尺寸的变化，我们必须修改margin。其他部分形状将不在视野范围内。运行时的边际值很难。

＆＃13;

.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%);  
}

＆＃13;

<div class='shape'>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>

＆＃13;

使用SVG：

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

SVG设计为默认响应，即使容器的尺寸发生变化也能很好地适应。需要注意的一件事是，路径的中风也会缩放。因此，当容器的高度和宽度在不保持原始比例的情况下改变时（也就是说，仅高度增加），则行程的某些部分变得比其余部分更厚（即，如果高度单独改变那么水平线变粗了）。这可以通过添加属性vector-effect='non-scaling-stroke'来解决，但IE不支持。

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

使用Canvas：

Canvas绘图命令与SVG命令非常相似，我们再次使用path和moveTo命令绘制lineTo来生成线条。我们只是移动到一个点（由X和Y坐标表示），然后从该点到其他指定点绘制线条。同样，Canvas绝对定位于父级。

画布绘图是基于栅格的（与基于矢量的SVG不同），因此默认情况下它不响应。缩放时，Canvas图形会变得模糊（像素化），并且每当容器尺寸发生变化时都需要重新绘制。这使得当容器的尺寸没有固定时使用它不是很好。

＆＃13;

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();
}

＆＃13;

.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%);
}

＆＃13;

<div class='shape'>
  <canvas id='canvas' height='100px' width='200px'></canvas>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>

＆＃13;

Answer 2

如果形状只是用于“装饰”，你可以随时使用CSS3的边框技巧。

#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #1abc9c transparent;
}

#pentagon_two{
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #1abc9c transparent;
    transform: rotate(180deg);
}

JSFiddle

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

2 个答案: