用css伪类制作三角形
来源:互联网 发布:js删除数组中某些元素 编辑:程序博客网 时间:2024/06/05 05:39
.contact_div:after{content:""; display:block; width:0; height:0; position:absolute; left:121px; top:-30px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid transparent; border-bottom:5px solid #FFF}
用伪类before和after制作三角形箭头网上有一堆教程代码,挺简单的。
箭头向上:
- #content:before{position:absolute;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid #ccc;content:" ";display:block;width:0;height:0}
位置自己调整一下即可,向下、左、右 以此类推,对于content仅有背景色而没有边框的情况下是毫无违和感的。
关键来了:自家主题有一个地方用到这个小三角,就是回复嵌套的评论,俺的嵌套评论是带边框的,而伪类制作的三角形本身就是border的宽度,所以没有边框,那么结合起来就是下面这样:
可以看出有多么不和谐。这个问题实在不懂,纠结了很久也考虑过用图片,今天逛其他人的博客时偶然发现其实可以通过before和after两个不同颜色的三角形错开而叠加出一条边框来:
这时候蓝色相当于边框了,可以通过调整两个三角的位移来调整边框的像素。
知道思路一切就简单了,最终完成如下图:
其实很多常规CSS手段实现不了的边框效果都可以用叠加背景色来达到目的。
0 0
- 用css伪类制作三角形
- 用css制作三角形
- 用css制作一个三角形箭头
- 用css制作一个三角形箭头
- 用html,css制作一个三角形
- CSS-制作三角形
- CSS三角形制作样式
- css制作三角形
- css 制作三角形/平行四边形
- css 制作三角形
- css制作三角形
- css制作三角形
- css制作实心三角形
- css制作三角形
- css三角形的制作
- css中使用伪类制作箭头
- css制作三角形,下拉框三角形
- 伪类三角形
- <考后>管理经济学总结
- 抽象工厂模式(二):产品等级结构与产品族
- Java Executor
- YUV文件的转换方法
- C/C++学习笔记(二)
- 用css伪类制作三角形
- 关于sequence的一些见解
- 处理器管理(二)——中断处理过程
- 笔试2
- 山东省第一届省赛 I(线段树优化)
- java ftp 上传下载
- Redis入门一:redis简单介绍和虚拟机下的安装
- 编译FFMpeg的Android版本,并整合到android studio
- 总结