纯css画三角形,勾等形状
//三角形

.money-ul li.active:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
border-bottom: 13px solid red;
border-left: 15px solid transparent;
}
//勾

.money-ul li.active:before{
content: '';
position: absolute;
width: 7px;
height: 3px;
background: transparent;
bottom: 3px;
right: 0px;
border: 2px solid white;
border-top: none;
border-right: none;
-webkit-transform: rotate(-55deg);
-ms-transform: rotate(-55deg);
transform: rotate(-55deg);
z-index: 9;
}
纯css画三角形,勾等形状的更多相关文章
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- 理解纯CSS画三角形
pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...
- 纯CSS画三角形(带边框)
实例一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- 纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...
- CSS学习笔记(8)--纯CSS绘制三角形(各种角度)
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
随机推荐
- 2016级算法第三次上机-E.ModricWang's Polygons
930 ModricWang's Polygons 思路 首先要想明白,哪些多边形可能是格点正多边形? 分情况考虑: 三角形不可能,因为边长为有理数的正三角形的面积为无理数,而格点三角形的面积为有理数 ...
- JDBC完成增加-修改-增加-查询
JDBC的基本使用流程: 增加 1 导入jar包: 导入ojdbc6.jar,在项目上右键 builder path-->add to builder path. 2 ...
- Comparable比较器和Comparator比较器
1.Comparable比较器 在Arrays类中存在sort()排序方法,此方法可以直接对对象数组进行排序. public static void sort(Object[] a 根据元素的自然顺序 ...
- Jmeter打开url时提示“请在微信客户端打开链接问题”
前提: 1.HTTP信息头管理器已添加了“User-Agent” 2.工作台添加HTTP代理服务器(注意端口和客户端填写的代理端口要一致) 但是运行的时候总是提示“请在微信客户端打开链接” 查阅各种资 ...
- Golang开发环境搭建
1.下载golang安装包: 下载地址:https://golang.google.cn/dl/ 2.安装Eclipse 下载goclipse 插件 3.配置 Go 的编译器 4.写代码. packa ...
- 2017 FVDI2 ABRITES Commander with 18 Softwares FULL Version + FLY OBD Terminator + J2534 DrewTech Softwares
Highlights of FVDI2 Abrites Commander Full Version: 1.Free update online. 2.This is full version FVD ...
- Kettle 中生成随机数 或者GUID唯一标识符
添加步骤 "生成随机数" 英文名字叫 "Generate Random Value" 如下图..选择UUID..
- C# 直接创建一个DataTable,并为之添加数据(自定义DataTable) 转
DataTable dt=new DataTable("cart"); DataColumn dc1=new DataColumn("prizename",Ty ...
- JAVA学习3:Eclipse中集成Tomcat
问题: 很多时候在Eclipse中启动Tmocat后,不能访问本机的localhost:8080主页,并且其他项目也不能访问. 原因: 打开Tomcat下的webapp后也找补到项目目录,这是因为Ec ...
- WCF系列教程之WCF消息交换模式之单项模式
1.使用WCF单项模式须知 (1).WCF服务端接受客户端的请求,但是不会对客户端进行回复 (2).使用单项模式的服务端接口,不能包含ref或者out类型的参数,至于为什么,请参考C# ref与out ...