Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
chokcoco opened this issue Mar 18, 2019 · 17 comments
Open

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

chokcoco opened this issue Mar 18, 2019 · 17 comments
Labels
Border 技巧

Comments

@chokcoco
Copy link
Owner

chokcoco commented Mar 18, 2019 •
edited
Loading

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

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

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

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

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

image

其实就是考察，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;
}

image

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

示意图如下：

33

最后，加上 overflow: hidden 即可：

44

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

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

image

Codepen Demo - 单标签左边竖条的实现方式
@nonbeingLi
Copy link

nonbeingLi commented Apr 22, 2019 •
edited
Loading

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

@chokcoco
Copy link
Owner Author

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

@leitongda
Copy link

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

@NSGUF
Copy link

NSGUF commented Sep 3, 2019

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

div加上position:relative就行了

@arzyu
Copy link

arzyu commented Sep 3, 2019

开个脑洞，: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
Copy link
Owner Author

@arzyu 有丶东西~

@1061127386
Copy link

厉害了。

@HondryTravis
Copy link

太强了

@mouday
Copy link

mouday commented Jul 11, 2022

太强了！

@elmelloi
Copy link

elmelloi commented Aug 4, 2022

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

@angryLid
Copy link

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

@15200596294git
Copy link

aka螃蟹来了

@Jason-dom
Copy link

Jason-dom commented Dec 20, 2023 via email

@aben126
Copy link

aben126 commented Mar 26, 2024

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

@zhengcookie
Copy link

最后一个是静态的吧

@clear-zhao
Copy link

在first-letter 实现中，好像这些代码没用吧？
image
因为mdn说first-letter只支持这些属性：
image
而且我删除或者更改这些属性的值，样式也没有变化。
不知道是不是，大家试验的怎么样

@huhaoer
Copy link

huhaoer commented Jul 10, 2024

顶瓜瓜

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Border 技巧
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests