<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS箭头</title><style>.step1 {width: 30px;height:30px;margin-bottom: 20px;border-width:20px;border-style:solid;border-color:#e66161 #f3bb5b #94e24f #85bfda;}.step2 {width: 0px;height:0px;margin-bottom: 20px;border-width:20px;border-style:solid;border-color:#e66161 #f3bb5b #94e24f #85bfda;}.step3{width: 0px;height:0px;margin-bottom: 20px;border-width:20px;border-style:solid;border-color: transparent;border-top-color: #e66161;}.test-step{position: relative;margin-left:20px;margin-bottom: 20px;padding: 5px;width:150px;height: 25px;line-height: 25px;border:0px solid black;border-radius:5px;background: rgba(245,245,24,1)}.test-step:before {content: "";display: block;position: absolute;width:0;height: 0;border: 10px solid transparent; /*边框宽度为10px 颜色透明（也就是隐藏） */border-right-color: rgba(245,245,24,1); /*只显示右边的边框 显示效果就是向左的箭头*/left: -20px; /*在DIV左边显示右边的边框 要向左移动2倍边框宽度 即20px*/top: 9px; /*高度为25+5+5=35 排除箭头高度20 剩余15 显示在距顶部9px的位置 */}.test-step1{position: relative;margin-left:20px;padding: 5px;width:150px;height: 25px;line-height: 25px;border:1px solid black;border-radius:5px;background: rgba(245,245,24,1)}.test-step1:before {content: "";display: block;position: absolute;width:0;height: 0;border: 10px solid transparent;border-right-color: black;left: -21px;top: 9px;}.test-step1::after {content: "";display: block;position: absolute;width:0;height: 0;border: 10px solid transparent;border-right-color: rgba(245,245,24,1);left: -20px;top: 9px;}</style></head><body><div class="container" id="app"><!-- 一步步显示来查看CSS小三角产生的原理 --><div class="step1"></div><div class="step2"></div><div class="step3"></div><div class="test-step">模拟微信对话框</div><div class="test-step1">模拟带边框的对话框</div></div></body></html>
备注说明：如input这样不能包含子元素的标签是不支持::after 这样的伪元素的。
