纯CSS绘制一个绘画气泡
工具/原料
html
方法/步骤
1
先在页面中加入一个div
2
用css让div显示成长方形
3
让长方形的四个角成圆角
4
接下来要做的是在长方形的左边新增一个三角箭头。这里要用到伪类:before。所以必须把长方形的position改为relative，这样才好让before的位置相对于长方形定位。按下图这样改好后，暂时是看不出任何效果的。（margin-left只是为了让div不贴边）
5
接下来要用到画三角形的原理，利用一个高宽都为0的div，如果它的边有设置的恰到好处，就能呈现出三角形border-top: 13px solid transparent;border-right: 26px solid red;border-bottom: 13px solid transparent;