//三角形

.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. php-elasticsearch bulk批量插入数据

    1.单条插入 <?php include '../vendor/Elasticsearch/autoload.php'; $a['hosts'] = array( #需要用户名时 http:// ...

  2. grunt 实例构建(四)

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  3. jsp、Servlet的面试题

    3. 谈谈Servlet的生命周期 当接收到请求的时候,容器察看对应的Servlet对象是否存在,如果不存在,需要加载Servetl,实例化Servlet,调用init方法进行初始化.如果已经存在,根 ...

  4. 同时安装Python2和Python3,如何兼容并切换使用详解

    由于历史原因,Python有两个大的版本分支,Python2和Python3,又由于一些库只支持某个版本分支,所以需要在电脑上同时安装Python2和Python3,因此如何让两个版本的Python兼 ...

  5. stm32cubemx 固件安装

    STM32CubeMX 可以在线安装固件库,也可以离线安装 1  在线安装 安装好之后,选项框显示为绿色 2  离线安装 先下载固件包 F1 : https://www.st.com/en/embed ...

  6. JavaScript跨浏览器处理事件以及相关对象

    主流的浏览器和IE浏览器在处理事件和事件对象上是有所区别的,我们一般会通过EventUtil进行封装,这样,就可以正常的跨浏览器处理事件了,本文的主要内容总结自<JavaScript高级程序设计 ...

  7. Java学习之路(三):Java中的数组

    数组的概述和定义的格式 数组的作用: 用来存储同种数据类型的多个值 数组的基本概念: 数组是存储同一种数据类型多个元素的集合.就相当于一个容器. 注意:数组既可以存储基本数据类型,也可以存储引用数据类 ...

  8. 013-PaymentUtils工具类模板

    package ${enclosing_package}; import java.io.UnsupportedEncodingException; import java.security.Mess ...

  9. synchronized的可见性理解

    之前的时候看<并发编程的艺术>,书中提到dcl写法的单例模式是有问题的,有可能会导致调用者得到一个创建了一半的对象,从而导致报错.修复办法是将单例对象的引用添加volatile进行修饰,禁 ...

  10. elasticsearch 初步

    本文主要内容: 1.elasticsearch的认识(是个啥,能干啥) 2.安装启动.简单集群及关键配置 3.名词解释 4.存取数据,中文分词 ---------------------------- ...