CSS实现排行榜标签样式
2017-12-02 10:12
579 查看
CSS实现排行榜标签样式
即:
主要分以下几步介绍我的实现过程:
初始实现方法(不成功)
后续实现方法(成功)
原网页实现方法
1.初始实现方法
当看到这个样式的时候首先想到的是使用CSS应当可以实现。实现方式就是一个定width和height的红色div,再加上下方的一个白色三角形覆盖红色div的下部分即可实现。但在最后看效果的时候却是这样的。发现在这里出现的问题是三角形会遮盖到后面的图片,看起来很奇怪。那么首先想到的解决方法是调整z-index大小来改变层次,首先红色div的z-index肯定大于图片的z-index,那么如果三角形能露出图片则必定无法遮盖红色div。故这样不行。
2.改变画法
既然上述方法不行,那么可以发现如果我们画的不是底下的白色三角形,而是画两边的红色小三角,在减少红色div的height,再拼接一下,那么就能够完成上述样式,并能够露出图片。在CSS代码方面只需要作出如下改变.trangle { border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 10px solid #fff; }
改为:
.trangle { border-left: 15px solid red; border-right: 15px solid red; border-bottom: 10px solid transparent; }
可以看到,这样便能达到效果。因此在使用CSS写这样的图形时,方法大多数不止一种,还是应多加思考实现方法。
3.原网页实现
用Google F12原网页,才发现,原网页的排行榜标签是个图片啊……相关文章推荐
- [转] CSS中实现TABLE标签的cellpadding="0" cellspacing="0"样式
- HTML5[4]:去除不必要的标签,完全使用css实现样式
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- css之指定带有特点样式的ul下所有li里面的a标签的样式
- 网页设计【常用上的CSS来实现样式】
- table标签+css代码实现选项卡效果(用)
- 用css和jquery实现标签页效果(一)
- 纯CSS 实现radio checkbox样式美化
- javascript+css 网页每次加载不同样式的实现方法
- jQuery事件 mouseover方法与mouseout方法实现鼠标移进显示移出消失的效果 (css控制span标签)
- css span右对齐 css li标签中span日期靠右布局实现代码
- DIV+CSS实现放大镜效果的分页样式
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- DIV+CSS定义滚动条样式,实现内嵌效果
- css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式
- div+css+js实现竖向排列的标签选项卡
- javascript+css 网页每次加载不同样式的实现方法
- 纯css实现刻度尺列表样式
- input标签submit属性,用CSS控制样式时高度不好控制的解决办法
- css基础 后代选择器 给标记的后代中 指定的标签/class名称 添加样式 (后代多级的)