谈谈一些有趣的CSS题目（1）-- 左边框的多种实现方式

[chokcoco]

开本 issues ，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

不断更新，不断更新，不断更新，重要的事情说三遍。

本文是 iCSS 的开篇之作，当初开 iCSS 的仓库，就是想着收集 CSS 中各种有意思的奇技淫巧以及一些容易忽视的 CSS 细节，抛开了实用性，题目更多的为了拓宽解决问题的思路。

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

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

假设我们的单标签是一个 div:

<div></div>

定义如下通用CSS：

div {
    position: relative;
    width: 200px;
    height: 60px;
    background: #ddd;
}

法一：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 大会听到张鑫旭老师和袁川老师的分享后想到的。

下划线也是 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;
}

接着我们去掉文本，就可以得到一个单独的正方形 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;
}

示意图如下：

最后，加上 overflow: hidden 即可：

---

上述就是想到的 11 种方法，也欢迎大家让自己的思维天马行空一下，想想看还有没有一些有意思的解法。

上述 11 种每种实现可以戳这里看看：

Codepen Demo - 单标签左边竖条的实现方式

[nonbeingLi]

轮廓 outline的方法尝试后行不通 应该是需要两个div嵌套吧

[chokcoco]

@nonbeingLi 嗯。这里需要一个伪元素帮助遮挡一下~

[leitongda]

伪元素 :first-letter 加上 特殊字符 ▎ 也可以实现

[NSGUF]

轮廓 outline的方法尝试后行不通 应该是需要两个div嵌套吧

div加上position:relative就行了

[arzyu]

开个脑洞，:p

{
    display: list-item;
    list-style: square inside;
    width: 200px;
    height: 40px;
    padding-left: 5px;
    line-height: 0;
    font-size: 9999%;
    overflow: hidden;
    background: deeppink;
    color: #ddd;
}

[chokcoco]

@arzyu 有丶东西~

[1061127386]

厉害了。

[HondryTravis]

太强了

[mouday]

太强了！

[elmelloi]

codepen示例里面伪元素实现类名里的“pesudo”拼错了吧，是“pseudo”

[angryLid]

<svg />和<canvas />都视为贴图法吗？

[15200596294git]

aka螃蟹来了

[Jason-dom]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[aben126]

真强。牛，第一次知道可以这么做，

[zhengcookie]

最后一个是静态的吧

[clear-zhao]

在first-letter 实现中，好像这些代码没用吧？

因为mdn说first-letter只支持这些属性：

而且我删除或者更改这些属性的值，样式也没有变化。
不知道是不是，大家试验的怎么样

[huhaoer]

顶瓜瓜