html 提示框-后端css实现气泡框

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

场景：

工作中遇到一个治疗效果需要气泡框提示，不需要鼠标移动。 是一个静态气泡盒治疗效果，所以我决定用纯css来实现。 实现思路：一个有边框的容器html 提示框，左边放一个三角形，实现气泡框的疗效。

实现疗效图：

1、方法一

可以给一个div标签，然后在上面设置属性，由于需求，我需要对一个span标签进行操作。 span是行内元素，在进行属性限制之前需要将其转换为块内元素。

组成要素：

 
       双击卡片，可修改报表类别名称
 

气泡盒款式：

// 该部分是个框的效果
.popTag span { 
    background-color: #4d86ff17; // 设置背景色
    display: inline-block;   // 将行内元素转为行内块元素，才能设置块属性
    padding: 0 10px;         // 左右内边距为10px
    border-radius: 4px;      // 设置边框的圆角
    margin-left: 20px;
    position: relative;      // 设置相对位置布局
    font-size: 14px;
    font-weight: normal;
  }
// 该部分是个三角形的效果，实现原理，将一个框的宽度高度设置为0出现四个三角形，设置边框为6px,设置颜色和线条，将不需要显示三边设置为白色，用四个方向设置绝对位置，即可实现。
  .popTag span::after {
    content: '';
    border: 6px dashed #4d86ff17;
    border-top: 6px solid #fff;
    border-bottom: 6px solid #fff;
    border-left: 6px solid #fff;
    position: absolute;
    top: 5px;
    left: -12px;
  }

2、方法二：

达到疗效：

.pop{
      width:200px;
      height:100px;
      border:2px solid grey;
      border-radius: 4px;
      box-shadow: 2px 2px 2px grey;
      position:absolute;
      background-color:white;
    }
    .triangle-bottom{
      width:0;
      height:0;
      border-top:10px solid grey;
      border-left:10px dashed transparent;
      border-right:10px dashed transparent;
      position:absolute;
      left:90px;
      top:100px;
    }　

3、方法三：

实现思路：先给一个框架，然后在div前给一个三角形，并设置三角形的三边透明，同时显示颜色。 这时，它是一个实心三角形，然后在div后面将三角形的颜色设置为黄色，就会出现空心三角形。 达到疗效：

    .div{
        width: 200px;
        height: 100px;
        border: 2px solid #ff0;
        position: relative;
    	}
    .div::before{
	content: '';
	width: 0;
	height: 0;
	border: 20px solid;
	position: absolute;
	bottom: -40px;
	left: 140px;
	border-color:  #ff0 transparent transparent;
	}
    .div::after{
	content: '';
	width: 0;
	height: 0;
	border: 20px solid;
	position: absolute;
	bottom: -36px;
	left: 140px;
	border-color:  #fff transparent transparent;
	}

4.实现椭圆形气泡框

将div设置为正圆，旋转一定角度形成一个矩形。 当设置的矩形的上部位置与对话框的位置重合时，就会生成如图所示的气泡框。

另外，还可以设置气泡div的border-radius，并设置矩形的旋转角度和位置html 提示框，形成气泡框。 如果对话框是圆形的，则可以旋转 45 度。

疗效如下：

这是气泡框demo


.qipao{
        width: 200px;
	height: 60px;
	margin: 20px 0 20px 200px;
	background: #69A6D1;
	text-align: center;
	padding-top: 40px;
	font-size: 16px;
	border-radius: 50%;
    	}
.demo{
	width: 38px;
	height: 38px;
	background: #69A6D1;
	transform: rotate(70deg);
	margin-left: 230px;	
	margin-top: -57px;
}