CSS “边框法”实现气泡对话框效果

描述

今天想学习下用css画气泡对话框，原来主要是对border的使用（即把握border的四个方向设置）。

border原理

 <style>
      div.border {
            width: 0;
            height: 0;
            border-width: 20px;
            border-style: solid solid solid solid; /*上 右 下 左*/
            border-color: red yellow green black;/*上 右 下 左*/
        }
    </style>

<!--边框-->
<div class="border"></div>

效果图

画下三角

<style>
 #triangle-down {
            width: 0;
            height: 0;
            border-style: solid;
            border-color:red transparent transparent;
            border-width: 50px 50px 0;
            /*border-top: 50px solid red;*/
            /*border-right: 50px solid transparent;*/
            /*border-left: 50px solid transparent;*/
        }
</style>

效果图

CSS “边框法”实现气泡对话框效果

思路

画两个三角形：

1. 一个三角在底层（最终效果为镂空三角形的边框）。
2. 一个三角形在上层做白色镂空遮罩，并定位向上偏移几像素。

代码

  <style>
        .box {
            width: 300px;
            padding: 40px;
            border: 5px solid #beceeb;
            position: relative;
            text-align: center;
        }

        /*重点*/
        .box .sjx {
            width: 0;
            height: 0;
            border-width: 20px 20px 0;
            border-style: solid;
            position: absolute;
        }

        /*重点*/
        div.down {
            border-color: #beceeb transparent transparent;
            bottom: -20px
        }

        /*重点 上边框的border-color要为白色起遮罩的效果，左右两边的border-color要透明*/
        div.up {
            border-color: #fff transparent transparent;
            bottom: -13px
        }

    </style>

<div class="box">
    <!--底层-->
    <div class="sjx down"></div>
    <!--上层-->
    <div class="sjx up"></div>
    CSS “边框法”实现气泡对话框效果
</div>

效果图