1、下面这个图形，只使用一个标签，可以有多少种实现方式：

其实就是考察，CSS 有多少种生成直线的方式，不管实用不实用，除去使用图片的方法，我们罗列一下。

法一：border

这个应该是最最最容易想到的了

div {
  border-left: 5px solid deeppink;
}

法二：使用伪元素

一个标签，算上 before 与 after 伪元素，其实算是有三个标签，这也是很多单标签作图的基础，本题中，使用伪元素可以轻易完成。

div::after {
  content: '';
  width: 5px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  background: deeppink;
}

法三：外 box-shadow

盒阴影 box-shadow 大部分人都只是用了生成阴影，其实阴影可以有多重阴影，阴影不可以不虚化，这就需要去了解一下 box-shaodw 的每一个参数具体作用。使用 box-shaodw 解题：

div {
  box-shadow: -5px 0px 0 0 deeppink;
}

法四：内 box-shadow

盒阴影还有一个参数 inset ，用于设置内阴影，也可以完成：

div {
  box-shadow: inset 5px 0px 0 0 deeppink;
}

法五：drop-shadow

drop-shadow 是 CSS3 新增滤镜 filter 中的其中一个滤镜，也可以生成阴影，不过它的数值参数个数只有 3 个，比之 box-shadow 少一个。

div {
  filter: drop-shadow(-5px 0 0 deeppink);
}

法六：渐变 linearGradient

灵活使用 CSS3 的渐变可以完成大量想不到的图形，CSS3 的渐变分为线性渐变和径向渐变，本题使用线性渐变，可以轻易解题：

div {
  background-image: linear-gradient(
    90deg,
    deeppink 0px,
    deeppink 5px,
    transparent 5px
  );
}

法七：轮廓 outline

这个用的比较少，outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。这个方法算是下下之选。

div {
  margin-left: 25px;
  height: 50px;
  outline: 5px solid deeppink;
}
div:after {
  position: absolute;
  content: 'outline 实现';
  top: -5px;
  bottom: -5px;
  right: -5px;
  left: 0;
  background: #ddd;
}

法八: 滚动条

通过改变滚动条样式实现：

div {
  width: 205px;
  background: deeppink;
  overflow-y: scroll;
}
div::-webkit-scrollbar {
  width: 200px;
  background-color: #ddd;
}

抛开实用性，仅仅是模拟出这个样式的话，这个方法真的让人眼前一亮。

法九：使用下划线实现

下划线也是 CSS 中能够产生直线的一种方法，那么是否能够利用它来生成边框呢。

我们使用元素的伪类使用下划线，将伪类的内容设置为 ____，就可以实现内容与下划线重叠，再设置 文字颜色，下划线的颜色也将随之改变，然后是一些旋转位移：

.textDecoration {
  overflow: hidden;

  &::before {
    position: absolute;
    content: '____';
    font-size: 40px;
    color: #000;
    bottom: 0;
    text-decoration: underline;
    color: deeppink;
    line-height: 60px;
    transform: rotate(90deg);
    right: 142px;
  }
}

法十：使用 ::first-letter 伪元素

与 ::before、::after 伪元素类似，我们还可以使用 ::first-letter 伪元素。当然这个要求单个标签内存在内容。然后利用定位即可。

<div class='fitstLetter' > 1</div > .fitstLetter {
  position: relative;
  overflow: hidden;

  &::first-letter {
    background: deeppink;
    color: transparent;
    width: 5px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 34px 0px;
    margin-left: -196px;
  }
}

法十一：使用 list-style 实现 这个属于非常非常脑洞大开的想法。

我们知道，可以通过 list-style 设置列表的装饰序号，并且可以通过 font-size 和 color 控制 list-style-type 的大小和颜色。那么脑洞大开一下，无限放大这个 list-style-type，再给容器设置一个 padding-left 即可。

单个正常的 list-style-type：

<div > 11223344</div > div {
  display: list-item;
  list-style-type: square;
  list-style-position: inside;
  font-size: 20px;
  background: deeppink;
  color: #ddd;
}

11223344

接着我们去掉文本，就可以得到一个单独的正方形 `list-item`。再设置 `padding-left: 5px`，再无限放大这个小小的 `list-item`：

div {
  display: list-item;
  list-style: square inside;
  padding-left: 5px;
  font-size: 600px;
  // overflow: hidden;
  background: deeppink;
  color: #ddd;
}

示意图如下：