一个标签可以绘制多少东西？聊聊关于标签的骚操作

阿哈外太空
397 阅读3分钟

「这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战」。

前言

思考一下，如果只给你一个html标签，你能拿它绘制出多少东西出来

可能有读者不是特别理解这句话想表达的意思，其实这个问题想传达的就是 用尽量少的标签去做尽可能多的事

好像还是很生涩难懂，不过没关系，我们在下文中运用一个例子，就很容易理解了

让更少创造更多

如果我们画一个下图所示的效果，你们会怎么做？ image.png

实现这个效果本身并不难，实现方式当然也各有不同。但是你有没有想过，只用一个标签将它实现？本文就给读者展示别样的骚操作，只用一个标签实现上图的效果

伪元素

在介绍如何用一个标签实现上图效果之前，我们先来看看一个东西：伪元素

MDN关于伪元素的解释是：伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式传送门

你需要注意一下伪元素和伪类的区别，具体的区别这里不展开，各位同学可以自行查阅资料

在伪元素中，::after和::before是可以在元素的尾部和头部创建一个虚拟节点。创建一个虚拟节点？这就厉害了，这意味着什么？意味着一个节点可以当三个节点用啊！

不过用伪元素创建的虚拟节点，需要声明content属性，否则该虚拟节点是不会被渲染出来的

实现

说了用一个标签，那就绝不多用！上代码：

<div class='ttt'>
        这是测试案例的文案
</div>

.ttt{
    width: 670rpx;
    height: 200rpx;
    background-color:white;
    border-radius:15rpx;
    margin-top:100rpx;
    position: relative;
    padding-top:65rpx;
    box-sizing:border-box;
    color: #4D5E74;
    font-size: 30rpx;
    font-weight: 600;
    text-align: center;
}
.ttt::before{
    content: '';
    width: 670rpx;
    height: 36rpx;
    background: rgba(246, 106, 104, 1);
    background-image: 
        linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 0, transparent 75%, rgba(255, 255, 255, .2) 0),
        linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 0, transparent 75%, rgba(255, 255, 255, .2) 0);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
    border-radius: 15rpx 15rpx 0 0;
    position: absolute;
    top: 0;
    left: 0;
}
.ttt::after{
    content: '';
    width: 20rpx;
    height: 40rpx;
    background-color: white;
    border-radius: 10rpx;
    position: absolute;
    top: -20rpx;
    left: 100rpx;
    box-shadow: 450rpx 0 0 0 white;
}

从上面代码代码不难看出，我用::before绘制了面板的背景，然后用::after绘制了面板的挂钩，有同学可能会疑惑，不是有两个挂钩嘛，那另外一个是用什么渲染的，阴影啊！阴影在很多时候也是可以发挥出你意想不到的作用的！

说在后面

相信不少之前没玩着这种骚操作的读者看完会发出一声感叹，原来这么简单？

确实，实现起来确实很简单，本文也没什么操作上的难度，实现思路也没什么新奇的。只是想通过本案例，告诉读者们，对于业务上的需求，我们可以多多思考，说不定就可以想出更快更优更好的解法了！

avatar
文章
阅读
粉丝