用css样式画尖角

最新推荐文章于 2022-06-02 17:16:48 发布

z_Sherry

最新推荐文章于 2022-06-02 17:16:48 发布

阅读量1.5k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/z_Sherry/article/details/47322253

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<span style="font-family: KaiTi_GB2312; background-color: rgb(255, 255, 255);">效果图（百度某年笔试题）：</span>

<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #demo {
            width: 100px;
            height: 100px;
            background-color: #fff;
            position: relative;
            border: 2px solid #333;
        }

        #demo:after, #demo:before {
            border: solid transparent;
            content: ' ';
            height: 0;
            left: 100%;/*相当于left:100px;（因为div宽度为100px）*/
            position: absolute;
            width: 0;
        }
        #demo:after {
            border-width: 10px;
            border-left-color: #fff;
            top: 20px;
        }

        #demo:before {
            border-width: 12px;
            border-left-color: #000;
            top: 18px;
        }

    </style>
</head>
<body>
    <div id="demo"></div>
</body>
</html></span>

一些注意要点：

1.#demo:before会比#demo:after先执行

2.伪类和伪元素的区别：

（1）伪类，顾名思义，就是实际不存在的类，但我们却和对待真实的类一样去对待它。类，通俗的讲，就是有这样一些元素，因为它们具有某一种相同点，所以我们把它们归为一类。而伪类，可以理解为，就是几个已经被规定好了的特点，比如，a:hover，指的就是鼠标滑过a元素这个特点，具有这个特点的元素，都要执行a:hover指定的样式，再比如，ul:first-child，指的就是具有子元素、而且子元素可能不止一个（也可以唯一）这个特点，具有这个特点的元素，都要让自己的第一个子元素，执行ul:first-child指定的样式。

（2）伪元素，同样顾名思义，就是实际不存在的元素。实际存在的元素，可以理解为我们写在html中的那些标签，一个标签就是一个元素。而伪元素这类元素，并没有对应的一个标签，但我们还可以对它们进行一些样式操作。比如，p:before，意思是，在p标签之前插入我们的伪元素，我们可以给p:before设置样式，像对待一般元素一样对待它，但它并没有自己对应的标签，因此，叫它伪元素。再比如，p:first-letter，是对p标签内文本的第一个字符进行操作，它只是p标签的一部分，而不是一个实实在在的标签，因此，它也是一个伪元素。

z_Sherry

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用css样式画尖角

效果图（百度某年笔试题）： #demo { width: 100px; height: 100px; background-color: #fff; position: relative; border: 2px
复制链接

扫一扫

专栏目录