CSS實現氣泡框

本文轉載自查看原文 2020-05-09 15:27 580 CSS

效果：

思路：

用css寫出來一個較大三角形（下圖中藍色），再寫一個小三角(紅)去遮蓋大三角，漏出尖的一部分

==》

如果用CSS實現一個三角形呢？

給一個元素四周都加上邊框的話，

.box1 {
                width: 10px;
                height: 10px;
                border: 10px solid;
                border-color: red yellow blue green;
            }

形狀為：

生成一個三角形可以寫為：

.box2 {
				width: 0;
				height: 0;
				border: 30px solid;
				border-color: pink transparent transparent transparent;
			}

CSS實現氣泡框具體代碼：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 460px;
                padding: 30px 100px;
                position: relative;
                margin-left: 100px;
                background: #9ee06a;
                border-radius: 5px;
            }

            .box span {
                position: absolute;
                overflow: hidden;
            }

            .box span.needle {
                border-width: 14px 46px;
                border-style: solid;
                border-color: #9ee06a transparent transparent #9ee06a;
                left: 22px;
                top: 81.5px;
            }

            .box span.cover {
                border-width: 16px 32px;
                border-style: dashed solid solid dashed;
                border-color: #fff transparent transparent #fff;
                left: 13px;
                top: 81.5px;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <span class="needle"></span>
            <span class="cover"></span>
            第一個氣泡……
        </div>
    </body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css實現氣泡框效果純CSS氣泡框實現方法探究 css實現氣泡對話框-Demo 純CSS氣泡框實現方法探究(轉) 純CSS氣泡框實現方法探究氣泡彈框的實現純css實現氣泡效果 css 實現對話氣泡框（四種箭頭方向-多種方式實現） CSS制作氣泡對話框 WPF 氣泡提示框的簡單實現