用CSS3实现带小三角形的div框(不用图片)
2016-08-03 09:42
337 查看
现在看到了很多带小三角形的方框,如微信、Mac版的QQ、QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移背景图片法,那么今天就不用图片,用CSS3实现一下,下面我们来看一下实现代码。
首先我们来看一下CSS3实现三角形原理:其实就是对于transparent的应用
假如html代码是这样的
下面用CSS3分别实现向上、下、左、右的三角形
ok代码整理在一起后,效果大概是这样的:
好了原理我们了解了,那么我们就实战一下吧,来实现带小三角形的div框。
首先,写出html代码:
挂载有类"entry-trangle"的div只用来实现小三角形。对这个div用css3的transparent实现三角形,然后绝对定位、设置z-index:-1;、margin-left:-19px;,看下面css代码:
border-radius:5px;用来
好了,我们已经完工了,这是
首先我们来看一下CSS3实现三角形原理:其实就是对于transparent的应用
假如html代码是这样的
好了原理我们了解了,那么我们就实战一下吧,来实现带小三角形的div框。
首先,写出html代码:
实现圆角;绝对定位、z-index:-1;的目的都是使控制小三角形的div在最底层,不影响父级div里面的内容布局。
好了,我们已经完工了,这是
相关文章推荐
- 用CSS3实现带小三角形的div框(不用图片)
- 用CSS3实现带小三角形的div框(不用图片)
- 用CSS3实现带小三角形的div框(不用图片)
- 用CSS3实现带小三角形的div框(不用图片)
- 纯css3实现图片三角形排列
- CSS3 实现六边形Div图片展示效果
- 纯css3实现图片三角形排列
- 不用table仅用div标签,利用CSS3的Flexbox属性,实现跨行和跨列的表格或网格
- CSS3 实现六边形Div图片展示效果
- css3实现三角形指向的div
- css3实现一个div设置多张背景图片及background-image属性
- 不用图片,纯Css3实现超酷的类似iphone的玻璃气泡效果
- CSS3 实现六边形Div图片展示效果
- div css 伪类 不固定图片大小 居中, css div 实现三角形
- CSS3实现图片在DIV中上下左右居中(2)
- css3实现一个div设置多张背景图片及background-image属性
- 布局和排版教程 纯css3实现图片三角形排列
- 不用图片,纯Css3实现超酷的类似iphone的玻璃气泡效果
- css3实现一个div设置多张背景图片及background-image属性
- 不用图片而用css3实现一些阴影特效