应用CSS绘图基本的会话框图案设计的编码示例

日期:2021-03-04 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

以下图:左边3角形

css编码以下:

CSS Code拷贝內容到剪贴板
  1. #talkbubble {   
  2.     margin-left:30px;   
  3.    width120px;    
  4.    height80px;    
  5.    backgroundred;   
  6.    positionrelative;   
  7.    -moz-border-radius:    10px;    
  8.    -webkit-border-radius: 10px;    
  9.    border-radius:         10px;   
  10. }   
  11. #talkbubble:before {   
  12.    content:"";   
  13.    positionabsolute;   
  14.    rightright: 100%;   
  15.    top26px;   
  16.    width: 0;   
  17.    height: 0;   
  18.    border-top13px solid transparent;   
  19.    border-right26px solid red;   
  20.    border-bottom13px solid transparent;   
  21. }  

实际上,本实例的精粹便是3角形的绘图,那末怎样绘图3角形呢?我在这里总结1下!

上3角形,上3角形,顶部是尖的,因此用border-left,border-right,和border-bottom能够完成,给bottom1个色调,别的设定为transparent

CSS Code拷贝內容到剪贴板
  1. #triangle-up {   
  2.     width: 0;   
  3.     height: 0;   
  4.     border-left50px solid transparent;   
  5.     border-right50px solid transparent;   
  6.     border-bottom100px solid red;   
  7. }  

同理,大伙儿能够分辨1下以下编码各自是甚么样的3角形!

CSS Code拷贝內容到剪贴板
  1. #triangle-down {   
  2.     width: 0;   
  3.     height: 0;   
  4.     border-left50px solid transparent;   
  5.     border-right50px solid transparent;   
  6.     border-top100px solid red;   
  7. }    
  8.   
  9. #triangle-left {   
  10.     width: 0;   
  11.     height: 0;   
  12.     border-top50px solid transparent;   
  13.     border-right100px solid red;   
  14.     border-bottom50px solid transparent;   
  15. }   
  16.   
  17.  #triangle-rightright {   
  18.     width: 0;   
  19.     height: 0;   
  20.     border-top50px solid transparent;   
  21.     border-left100px solid red;   
  22.     border-bottom50px solid transparent;   
  23. }    
  24.   
  25. #triangle-topleft {   
  26.     width: 0;   
  27.     height: 0;   
  28.     border-top100px solid red;    
  29.     border-right100px solid transparent;             
  30. }   
  31. #triangle-topright {   
  32.     width: 0;   
  33.     height: 0;   
  34.     border-top100px solid red;    
  35.     border-left100px solid transparent;   
  36. }   
  37. #triangle-bottomleft {   
  38.     width: 0;   
  39.     height: 0;   
  40.     border-bottom100px solid red;    
  41.     border-right100px solid transparent;     
  42. }     
  43.   
  44. #triangle-bottomright {   
  45.     width: 0;   
  46.     height: 0;   
  47.     border-bottom100px solid red;    
  48.     border-left100px solid transparent;   
  49. }  

分辨出上面编码各自意味着甚么3角形吗?没错,我的取名是依据3角形的方位来的。大伙儿能够试1下。3角形会写了,那末会话框就得到解决了! 无论是左边的,還是上面的,要是更改1下before伪类的精准定位,便可以完成了。

自然,3角形的写法是很基本的。你还可以用css绘图出5角星、6角星、多边形、爱心这些。自然一些标记是不常见的,用的数最多的還是3角形。