使用css画带气泡的三角形

2018-3-8 Jon
 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><br />
<style><br />
			    body {<br />
			      margin: 50px;<br />
			    }<br />
			    .bubble {<br />
			      position: relative;<br />
			      border: 1px solid #ccc;<br />
			      width: 150px;<br />
			      height: 120px;<br />
			      border-radius: 5px;<br />
			    }<br />
			    .bubble::before, .bubble::after {<br />
			      content: '';<br />
			      border-left: 12px solid transparent;<br />
			      border-top: 15px solid #ccc;<br />
			      border-right: 12px solid transparent;<br />
			      position: absolute;<br />
			      bottom: -15px;<br />
			      left: 50%;<br />
			      transform: translateX(-50%);<br />
			    }<br />
			    .bubble::after {<br />
			      border-top: 15px solid #fff;<br />
			      bottom: -14px;<br />
			    }<br />
			  </style><br />
</head><body><div class="bubble"></div></body></html>
您可以修改框中代码后运行查看