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

Question

我试图在不使用图像的情况下创建下图（显然没有 ASCII 字符和实线）。我该怎么办？我在考虑 canvas，或者 CSS3，除非有更好的。

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

Answer 1

如果形状仅适用于 "decoration"，您始终可以只使用 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

Answer 2

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

使用 CSS 转换：

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

在设计响应式形状时，透视变换可能非常难以处理。随着容器尺寸的变化，我们将不得不修改 margin。形状的其他部分会消失。运行-time.

的保证金值应该是多少是相当困难的

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

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

How to create lines without using an image

html

css

html5-canvas

css-shapes