css对话框的写法

25807次浏览

最近比较忙,好久没有维护博客了,在这里表示歉意。

最近主要在做touchweb的项目,那么我就记录一下我在做这个项目中的问题吧,当然,今天主要是从css开始。后面博客会陆续记录其他的问题,例如图片延迟加载、图片的canvas渲染、jquery模拟下拉选择以及highchart图表、高德地图、swipe滑动、jquery的hover图片闪烁等问题。好吧,言归正传,今天主要先介绍一下css吧。

之前我在css常用效果总结这篇文章中写了一下常用的容易忘掉的css ,今天写的这个css模拟对话框,假如你理解了,那么是很好记的,你不理解没有关系,可以把我的这篇文章收藏起来,用到的时候,可以翻出来看一下!

如下图:左侧三角形

css代码如下:

#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;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

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

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

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

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

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
} 

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

 #triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
} 

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red; 
    border-right: 100px solid transparent;          
}
#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red; 
    border-left: 100px solid transparent;
}
#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red; 
    border-right: 100px solid transparent;  
}  

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red; 
    border-left: 100px solid transparent;
}

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

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

Tags: csscss3

相关文章: