脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

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

Haorooms   发布时间：2016-05-20 12:00:23   作者：Aaron   我要评论
气泡式对话框在Web页面上如今也十分普及和常见,对话框中三角形的朝向关键在于before伪元素的定位,接下来我们就来看一下使用CSS绘制基础的对话框图案的代码示例

如下图：左侧三角形
2016520120027789.png (186×110)

css代码如下：

CSS Code复制内容到剪贴板
  1. #talkbubble {   
  2.     margin-left:30px;   
  3.    width: 120px;    
  4.    height: 80px;    
  5.    background: red;   
  6.    position: relative;   
  7.    -moz-border-radius:    10px;    
  8.    -webkit-border-radius: 10px;    
  9.    border-radius:         10px;   
  10. }   
  11. #talkbubble:before {   
  12.    content:"";   
  13.    position: absolute;   
  14.    rightright: 100%;   
  15.    top: 26px;   
  16.    width: 0;   
  17.    height: 0;   
  18.    border-top: 13px solid transparent;   
  19.    border-right: 26px solid red;   
  20.    border-bottom: 13px solid transparent;   
  21. }  

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

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

CSS Code复制内容到剪贴板
  1. #triangle-up {   
  2.     width: 0;   
  3.     height: 0;   
  4.     border-left: 50px solid transparent;   
  5.     border-right: 50px solid transparent;   
  6.     border-bottom: 100px solid red;   
  7. }  

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

CSS Code复制内容到剪贴板
  1. #triangle-down {   
  2.     width: 0;   
  3.     height: 0;   
  4.     border-left: 50px solid transparent;   
  5.     border-right: 50px solid transparent;   
  6.     border-top: 100px solid red;   
  7. }    
  8.   
  9. #triangle-left {   
  10.     width: 0;   
  11.     height: 0;   
  12.     border-top: 50px solid transparent;   
  13.     border-right: 100px solid red;   
  14.     border-bottom: 50px solid transparent;   
  15. }   
  16.   
  17.  #triangle-rightright {   
  18.     width: 0;   
  19.     height: 0;   
  20.     border-top: 50px solid transparent;   
  21.     border-left: 100px solid red;   
  22.     border-bottom: 50px solid transparent;   
  23. }    
  24.   
  25. #triangle-topleft {   
  26.     width: 0;   
  27.     height: 0;   
  28.     border-top: 100px solid red;    
  29.     border-right: 100px solid transparent;             
  30. }   
  31. #triangle-topright {   
  32.     width: 0;   
  33.     height: 0;   
  34.     border-top: 100px solid red;    
  35.     border-left: 100px solid transparent;   
  36. }   
  37. #triangle-bottomleft {   
  38.     width: 0;   
  39.     height: 0;   
  40.     border-bottom: 100px solid red;    
  41.     border-right: 100px solid transparent;     
  42. }     
  43.   
  44. #triangle-bottomright {   
  45.     width: 0;   
  46.     height: 0;   
  47.     border-bottom: 100px solid red;    
  48.     border-left: 100px solid transparent;   
  49. }  

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

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

相关文章

  • CSS3中设置3D变形的transform-style属性详解

    transform-style经常被用来做三维空间坐标系中的图形变换,下面我们就来看看CSS3中设置3D变形的transform-style属性详解,需要的朋友可以参考下
    2016-05-23

  • css 元素选择器的简单实例

    下面小编就为大家带来一篇css 元素选择器的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-23

  • css border属性的使用方法和技巧

    下面小编就为大家带来一篇css border属性的使用方法和技巧。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-23

  • css sprite简单实例

    下面小编就为大家带来一篇css sprite简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-23

  • CSS3中的Transition过度与Animation动画属性使用要点

    这篇文章主要介绍了CSS3中的Transition过度与Animation动画属性使用要点Transition和Animation能被用来制作基本的页面图片动态效果,当然进一步的控制还是需要JavaScript的
    2016-05-20

  • CSS中:before和:after伪元素使用的奇技淫巧

    :before和:after伪元素在CSS中除了被用来添加元素、加小标、清浮动等,还有很多妙用之处,接下来我们就来看一两个CSS中:before和:after伪元素使用的奇技淫巧
    2016-05-20

  • CSS凹型导航按钮效果的实现代码

    下面小编就为大家带来一篇CSS凹型导航按钮效果的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧。祝大家游戏愉快哦
    2016-05-20

  • CSS3 magic带64种动画库特效源码

    magic.css是一套带64种动画效果的CSS3动画库。全部使用CSS3 animation动画来完成
    2016-05-19

  • CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

    下面小编就为大家带来一篇CSS文本超出指定宽度后隐藏并显示为省略号的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-24

最新评论

关注微信公众号

扫一扫