//三角形

.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. linux系统管理(1)之 内核编译选项查看

    三个方法 proc文件系统 ubunut debain 红帽等 proc文件系统 /proc/config.gz This file shows you the compile-time config ...

  2. Pytorch学习笔记(二)——Tensor

    一.对Tensor的操作 从接口的角度讲,对Tensor的操作可以分为两类: (1)torch.function (2)tensor.function 比如torch.sum(a, b)实际上和a.s ...

  3. 引入background和background-size不显示图片

    .bgLeft { position: absolute; left: -95px; background: url("../images/logo_1.png") left to ...

  4. (转)Linux strace命令

    原文:https://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316692.html https://linux.cn/article-6444-1 ...

  5. Docker安装及常用操作

    Docker简介: Docker是一个轻量级容器技术,类似于虚拟机技术,但性能远远高于虚拟机,Docker支持将软件编译成一个镜像(image),在这个镜像中做好对软件的各种配置,然后可以运行这个镜像 ...

  6. 基础selenium+Python(定位、等待、打印)

    1.第一个脚本 # coding = utf-8 from selenium import webdriver browser = webdriver.Firefox() browser.get(&q ...

  7. selenium中等待元素的加载

    在实际使用中,有时会出现一个元素还没有加载出来,导致无法获取,此时需要selenium处理来等待一段时间,此时处理方法有以下几种: 1.最笨.最简单但是最不推荐的方式: Thread.sleep(ti ...

  8. poj 3750 小孩报数问题

    小孩报数问题 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11527   Accepted: 5293 Descripti ...

  9. Mybatis-动态SQL语句

    有些时候,sql语句where条件中,需要一些安全判断,例如按某一条件查询时如果传入的参数是空,此时查询出的结果很可能是空的,也许我们需要参数为空时,是查出全部的信息.使用Oracle的序列.mysq ...

  10. zato server启动后自动关闭问题解决

    症状 zato start server 启动server后,过一会server自动关闭了 解决 查看日志 UnicodeDecodeError: 'ascii' codec can't decode ...