//三角形

.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画三角形,勾等形状的更多相关文章

  1. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  2. 理解纯CSS画三角形

    pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...

  3. 纯CSS画三角形(带边框)

    实例一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  5. CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  6. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  8. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  9. CSS学习笔记(8)--纯CSS绘制三角形(各种角度)

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

随机推荐

  1. Angular2 内置指令 NgFor 和 NgIf 详解

    http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...

  2. 2.ajax+servlet实现注册时用户名验证

    效果: 精灵图(来源:从百度注册中download下来的): userVerify.jsp <%@ page language="java" contentType=&quo ...

  3. image_size must contain 3 elements[4]

    今天在制作自己训练集合并且训练的时候,碰见了如下的错: image_size must contain 3 elements[4] 这是因为训练的数据集中不是所有的图片位深都是三通道的. 写一个脚本查 ...

  4. tp5 重定向缺少index.php报错(No input file specified)

    转别人的,有用,Mark一下 public 下的.htaccess 修改为 <IfModule mod_rewrite.c>  Options +FollowSymlinks -Multi ...

  5. CSAPP阅读笔记-汇编语言初探(算术和逻辑操作类指令)-来自第三章3.5的笔记-P128-P135

    1.算术和逻辑操作类指令分四类:加载有效地址,一元操作,二元操作和移位,如下: 2. leaq指令,类似mov指令,它左侧的数看似是给出一个地址,在内存中从给定的地址取操作数,传给右边的目的地.但其实 ...

  6. python namedtuple命名元组

    from collections import namedtuple Animal=namedtuple('Animal','name age type') perry=Animal(name='pe ...

  7. PyCharm | 常见问题

    1.安装使用 每次建立PyCharm工程都建立一个虚拟环境env,需要重新下载或复制模块

  8. checkbox 框 选中判断

    function checkAll(checktop){ $(":checkbox[name='id']").prop("checked",checktop.c ...

  9. [原]SuperMap GIS(JavaScript) 拉框放大和缩小功能实现

    版权声明:本文为博主原创文章,未经博主允许不得转载. var ZoomControl; /* * 拉框缩小 */ function ZoomOut(){ if(ZoomControl==null||Z ...

  10. android actionbar viewpager 实现类微信主界面布局

    1 Activity public class MainActivity extends FragmentActivity { private ViewPager pager; private Act ...