利用CSS三角形实现的冒泡框

最新推荐文章于 2023-08-31 19:31:56 发布

weixin_30337157

最新推荐文章于 2023-08-31 19:31:56 发布

阅读量226

点赞数

原文链接：http://www.cnblogs.com/babywhale/p/4800555.html

版权

请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>

这是一道去年的百度笔试题。

涉及定位、三角形、伪元素。

下面是我的解答以及一些知识概述，都在程序里了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #demo{
            width: 100px;
            height: 100px;
            background-color: #fff;
            border: 2px solid #000;
            position: relative;
        }
        #demo:before, #demo:after{
            width: 0;
            height: 0;
            content: "";
            position: absolute;
            border: solid transparent;
            left: 100%;
        }
        #demo:before{
            /*border-left: 12px solid #000;*/
            border-width: 12px;
            border-left-color: #000;
            top: 20px;
        }
        #demo:after{
            /*border-left: 10px solid #fff;*/
            border-width: 10px;
            border-left-color: #fff;
            top: 22px;
        }

        /*三角形*/
        #sanjiao{
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: red;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <p>伪元素选择器： :first-line, :first-letter :before, :after。<br/>
        :before表示在元素之前添加一个元素，:after表示在元素之后添加一个元素。<br/><br/>
        CSS中绘制三角形：容器宽高设为0，然后三角形的高就是border-width, 所以让border: 50px solid transparent，再把想要的三角对应的方向设成想要的颜色就好了，如border-left-color: red。
    </p>
    <div id="sanjiao"></div>
</body>
</html>