使用CSS绘制基础的对话框图案的代码示例

时间：2021-05-08

如下图：左侧三角形

css代码如下：

CSS Code复制内容到剪贴板
  • #talkbubble{
  • margin-left:30px;
  • width:120px;
  • height:80px;
  • background:red;
  • position:relative;
  • -moz-border-radius:10px;
  • -webkit-border-radius:10px;
  • border-radius:10px;
  • }
  • #talkbubble:before{
  • content:"";
  • position:absolute;
  • rightright:100%;
  • top:26px;
  • width:0;
  • height:0;
  • border-top:13pxsolidtransparent;
  • border-right:26pxsolidred;
  • border-bottom:13pxsolidtransparent;
  • }

    • 其实，本案例的精华就是三角形的绘制，那么如何绘制三角形呢？我在这里总结一下！

    上三角形，上三角形，顶部是尖的，所以用border-left，border-right，和border-bottom可以实现，给bottom一个颜色，其他设置为transparent

    CSS Code复制内容到剪贴板
  • #triangle-up{
  • width:0;
  • height:0;
  • border-left:50pxsolidtransparent;
  • border-right:50pxsolidtransparent;
  • border-bottom:100pxsolidred;
  • }

    • 同理，大家可以判断一下如下代码分别是什么样的三角形！

    CSS Code复制内容到剪贴板
  • #triangle-down{
  • width:0;
  • height:0;
  • border-left:50pxsolidtransparent;
  • border-right:50pxsolidtransparent;
  • border-top:100pxsolidred;
  • }
  • #triangle-left{
  • width:0;
  • height:0;
  • border-top:50pxsolidtransparent;
  • border-right:100pxsolidred;
  • border-bottom:50pxsolidtransparent;
  • }
  • #triangle-rightright{
  • width:0;
  • height:0;
  • border-top:50pxsolidtransparent;
  • border-left:100pxsolidred;
  • border-bottom:50pxsolidtransparent;
  • }
  • #triangle-topleft{
  • width:0;
  • height:0;
  • border-top:100pxsolidred;
  • border-right:100pxsolidtransparent;
  • }
  • #triangle-topright{
  • width:0;
  • height:0;
  • border-top:100pxsolidred;
  • border-left:100pxsolidtransparent;
  • }
  • #triangle-bottomleft{
  • width:0;
  • height:0;
  • border-bottom:100pxsolidred;
  • border-right:100pxsolidtransparent;
  • }
  • #triangle-bottomright{
  • width:0;
  • height:0;
  • border-bottom:100pxsolidred;
  • border-left:100pxsolidtransparent;
  • }

    • 判断出上面代码分别代表什么三角形吗？没错，我的命名是根据三角形的方向来的。大家可以试一下。三角形会写了，那么对话框就迎刃而解了！ 不管是左侧的，还是上面的，只要改变一下before伪类的定位，就可以实现了。

    当然，三角形的写法是很基础的。你也可以用css绘制出五角星、六角星、多边形、爱心等等。当然有些符号是不常用的，用的最多的还是三角形。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章