气泡小三角制作示例

Rain琴雨

已于 2023-04-20 16:33:16 修改

阅读量183

点赞数

文章标签： css css3 html

于 2023-04-20 16:30:22 首次发布

本文链接：https://blog.csdn.net/qq_49442626/article/details/130269837

版权

气泡小三角制作

效果预览

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>气泡小三角制作示例</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            /* 根元素定义全局 css 变量 */
            :root {
                --customShadowColor: rgb(248, 132, 0);
            }

            .divcontent {
                width: 800px;
                height: 500px;
                margin: 100px auto;
                background-color: aqua;
                overflow: hidden;
                position: relative;
            }

            /* 三角容器 */
            .divfour {
                position: absolute;
                top: 130px;
                left: 146px;
            }

            /* 三角第一层 */
            .divfive {
                display: inline-block;
                width: 140px;
                height: 140px;
                transform: rotateZ(45deg);
                position: absolute;
                top: 30px;
                left: 30px;
                box-shadow: 0 0 10px 10px var(--customShadowColor);
            }
            /* 三角第二层 */
            .divone {
                display: inline-block;
                border-color: rgba(0, 0, 0, 0) rgb(0, 0, 0) rgba(137, 43, 226, 0) red;
                border-style: solid;
                border-width: 100px 100px 100px 0px;
                position: absolute;
                z-index: 11;
            }
            /* 三角第三层 */
            .divtwo {
                display: inline-block;
                border-color: rgba(0, 0, 0, 0) rgb(255, 255, 255) rgba(137, 43, 226, 0) rgba(255, 0, 0, 0);
                border-style: solid;
                border-width: 100px 100px 100px 0px;
                position: absolute;
                left: 10px;
                z-index: 12;
            }

            /* 气泡框 */
            .divthere {
                border: 6px solid;
                width: 300px;
                height: 300px;
                margin: 100px auto;
                background-color: white;
                box-shadow: 0 0 10px 10px var(--customShadowColor);
                position: relative;
                z-index: 10;
            }
        </style>
    </head>
    <body>
        <div class="divcontent">
            <div class="divfour">
                <div class="divfive"></div>
                <div class="divone"></div>
                <div class="divtwo"></div>
            </div>
            <div class="divthere"></div>
        </div>
    </body>
</html>

Rain琴雨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
气泡小三角制作示例

气泡小三角制作<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1
复制链接

扫一扫