TypechoJoeTheme

A bit of life

登录
用户名
密码

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

2021-05-03
/
0 评论
/
467 阅读
/
正在检测是否收录...
05/03

<h3>请用 CSS 实现如下图的样式,相关尺寸如图示,其中 dom 结构为:</h3>

<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>

朗读
赞(0)
版权属于:

A bit of life

本文链接:

http://gxtvb.cn/archives/15/(转载时请注明本文出处及文章链接)

评论 (0)