css实现对话框效果

1.不带边框的对话框

<div class="bubble-box mb10">iCSS</div>

.bubble-box {
		    position: relative;
		    border-radius: 5px;
		    width: 200px;
		    height: 50px;
		    background-color: #f90;
		    line-height: 50px;
		    text-align: center;
		    font-size: 20px;
		    color: #fff;
		}
		.bubble-box::after {
			content: "";
		    position: absolute;
		    left: 100%;
		    top: 50%;
		    margin-top: -8px;
		    border: 8px solid transparent;
		    border-left-color: #f90;
		}

效果:

2.带边框的对话框,用伪元素实现

<div class="bubble-empty-box">iCSS</div>

.bubble-empty-box {
		    position: relative;
		    border: 2px solid #f90;
		    border-radius: 5px;
		    width: 200px;
		    height: 50px;
		    line-height: 46px;
		    text-align: center;
		    font-size: 20px;
		    color: #f90;
		}
		.bubble-empty-box::before {
		     position: absolute;
		     left: 100%;
		     top: 50%;
		     margin: -5px 0 0 2px;
		     border: 5px solid transparent;
		     border-left-color: #f90;
		     content: "";
		 }
		.bubble-empty-box::after {
		     position: absolute;
		     left: 100%;
		     top: 50%;
		     margin-top: -4px;
		     border: 4px solid transparent;
		     border-left-color: #fff;
		     content: "";
		 }

效果:

本文作者： Jasmine

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

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