css实现气泡对话框

常见的css实现气泡对话框方式:

代码:

<div class="box">
	    <div class="box1"></div>
	    <div class="box2"></div>
	    <div class="box3"></div>
	    <div class="box4"></div>
	</div>
	<div class="pop">
	    <p>伪元素border实现气泡对话框三角形</p>
	</div>
	<div class="pop-with-border">
	  <p>filter:drop-shadow实现整体阴影</p>
	</div>

.box {
		  overflow: hidden;
		}
		.box > div {
		  float: left;
		  margin: 20px;
		}
		
		.box1 {
		  width: 30px;
		  height: 30px;
		  border: 15px solid deeppink;
		  left: 140px;
		  bottom: 150px;
		}
		
		.box2 {
		  width: 30px;
		  height: 30px;
		  border: 15px solid;
		  border-color: #FFA500 #F00 #008000 #808080;
		}
		
		.box3 {
		  width: 0;
		  height: 0;
		  border: 15px solid;
		  border-color: #FFA500 #F00 #008000 #808080;
		}
		
		.box4 {
		  width: 0;
		  height: 0;
		  border: 15px solid;
		  border-color: transparent #F00 transparent transparent;
		}
		
		.pop {
		  margin: 30px;
		  width: 200px;
		  height: 100px;
		  padding: 10px;
		  background: #e91e63;
		  border-radius: 8px;
		  position: relative;
		}
		
		.pop::after {
		  content: "";
		  width: 0;
		  height: 0;
		  border: 12px solid;
		  border-color: transparent #e91e63 transparent transparent;
		  position: absolute;
		  top: 45px;
		  left: -24px;
		}
		
		.pop p {
		  color: #fff;
		  padding: 10px 20px;
		}
		
		.pop-with-border {
		  margin: 30px;
		  width: 200px;
		  height: 100px;
		  padding: 10px;
		  background: #fff;
		  border-radius: 8px;
		  position: relative;
		  border: 1px solid #ddd;
		  filter: drop-shadow(0 0 5px #eee);
		}
		
		.pop-with-border:before,
		.pop-with-border:after {
		  top: -8px;
		  border: 8px solid transparent;
		  border-top: 0;
		  border-bottom-color: #fff;
		  content: "";
		  display: block;
		  width: 0;
		  height: 0;
		  left: 16px;
		  overflow: hidden;
		  position: absolute;
		  z-index: 101;
		}
		
		.pop-with-border:before {
		  top: -9px;
		  border-bottom-color: #ddd;
		  z-index: 99;
		}
		
		.pop-with-border p {
		  padding: 10px 20px;
		}

效果:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/713

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！