1.  
      <view class="hd"></view>.hd {
    2.  
      content: "";
    3.  
      height: 16rpx;
    4.  
      width: 16rpx;
    5.  
      border-width: 4rpx 4rpx 0 0;
    6.  
      border-color: red;
    7.  
      border-style: solid;
    8.  
      transform: rotate(-45deg);
    9.  
      position: absolute;
    10.  
      top: 20rpx;
    11.  
      left: 30rpx;
    12.  
      }
    13.  
      .hd:hover {
    14.  
      transform: rotate(135deg);
    15.  
    16. 重点是:content 设置为空

效果CSS实现三角的更多相关文章

  1. css实现三角的一些方法

    css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的. 一下是几个很简单的例子:   css三角形状的制作:     css样式:    .trian ...

  2. 使用css实现三角符号

    关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...

  3. 使用css制作三角

    1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...

  4. css实现三角箭头(兼容IE6)

    纯css实现三角箭头有几种方式,常规的方式用css3的rotate把元素旋转45度角,无法兼容ie的主要原因是ie不支持边框透明, 第二种方法,使用chroma滤镜透明,经尝试在ie下会出现activ ...

  5. 爱心跳动效果 CSS实现

    爱心跳动效果 CSS实现 实现效果 砰砰砰 实现原理 通过动画改变每个元素的高度,从而实现每个元素高度变化的效果,为了使每个元素依次跳动,给每个元素添加一定的延时效果,使得从效果元素依次跳动 代码分析 ...

  6. css实现三角效果

    demo     <!DOCTYPE html> <html lang="zh"> <head> <meta charset=utf-8& ...

  7. 用css 制作三角

    html代码: <div class="div"></div> css代码: .div{ border-top:40px solid #ff0077; bo ...

  8. css倒三角的几种实现方式

    在网页中,你在很多地方都能看到倒三角,比如tooltips,下拉菜单等.大家有几种方式来实现呢? 1.BASE64编码 图片 假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个 ...

  9. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

随机推荐

  1. 织梦dede解决“更新数据库archives表时出错"方法

    登陆dedecms网站管理后台,选择执行 sql命令工具,将下列命令执复制进去并执行多行执行,该问题就可以解决. alter table `idea_archives` ADD `voteid` me ...

  2. Android中通过xml改变背景及文字颜色

    原创文章,转载请注明出处,谢谢! 本篇主要介绍Android开发中,通过XML资源文件来设置控件在不同状态下的背景及文字颜色.关于xml改变背景及文字颜色的原理,大家可以去看一下郭霖大神的源码分析文章 ...

  3. Mac下使Iterm2开机启动不显示界面

    一.在登录项上添加Iterm2的启动项 二.打开Iterm2 1.启动后会显示Iterm2,此时点击关闭按钮,保证桌面上没有任何的控制台窗口. 2.按[Command]+[Shift]+[S],保存名 ...

  4. Asp.NET MVC 拍卖网站,拆解【1】预览与目录

    本人最近带创业团队基本做完了一个艺术品拍卖的外包项目,分为网站前台(asp.net mvc5),网站管理员管理的后台使用的9900端口(asp.net mvc5),监听拍卖状态的windows服务,为 ...

  5. webpack使用 babili-webpack-plugin 报错 "original.line and original.column are not numbers"

    按照这个解决 https://github.com/chentsulin/electron-react-boilerplate/issues/1300 changing "babili-we ...

  6. InnoDB的哈希算法

    InnoDB存储引擎中自适应哈希索引使用的是散列表(Hash Table)的数据结构.但是散列表不只存在于自适应哈希中,在每个数据库中都存在.设想一个问题,当前我的内存为128G,我怎么得到内存中的某 ...

  7. 图解ARP协议(四)代理ARP原理与实践(“善意的欺骗”)

    一.代理ARP概述 我:当电脑要访问互联网上的服务器,目标MAC是什么? 很多小伙伴在刚学习网络协议的时候,经常这样直接回应:不就是服务器的MAC嘛! 这时我会反问:那电脑怎么拿到这个服务器的MAC地 ...

  8. linux定时任务之crontab

    1.使用crontab crontab -u //设定某个用户的cron服务 crontab -l //列出某个用户cron服务的详细内容 crontab -r //删除某个用户的cron服务 cro ...

  9. [PY3]——函数——函数注解 | 实现类型检查功能

    函数注解(Function Annotations)——> 可以在定义函数的时候对参数和返回值添加注解 写函数注解 #平时我们使用help()可以查看一个函数的说明,我们自己写的函数也可以提供这 ...

  10. hadoop学习笔记(二):简单启动

    一.hadoop组件依赖关系 二.hadoop日志格式: 两种日志,分别以out和log结尾: 1 以log结尾的日志:通过log4j日志记录格式进行记录的日志,采用日常滚动文件后缀策略来命名日志文件 ...