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. kubernetes pod termination pending

    在将k8s从1.7.9 升级到1.10.2 之后,发现删除pod一直处于terminating状态, 调查发现删不掉的pod都有一个特点就是pod yaml中command部分写错了,如下所示: ap ...

  2. 全网最全的Windows下Anaconda2 / Anaconda3里正确下载安装Theano(图文详解)

    不多说,直接上干货! Theano的安装教程目前网上一搜很多,前几天折腾了好久,终于安装成功了Anaconda3(Python3)的Theano,嗯~发博客总结并分享下经验教训吧. 渣电脑,显卡用的是 ...

  3. tomcat监控工具probe

    probe官网:http://www.lambdaprobe.org/ 但是已经链接至github了:https://github.com/psi-probe/psi-probe 下载psi-prob ...

  4. java中为什么重写equals时必须重写hashCode方法?

    在上一篇博文Java中equals和==的区别中介绍了Object类的equals方法,并且也介绍了我们可在重写equals方法,本章我们来说一下为什么重写equals方法的时候也要重写hashCod ...

  5. 深入理解java集合框架之---------HashMap集合

    深入理解HaspMap死循环问题 由于在公司项目中偶尔会遇到HashMap死循环造成CPU100%,重启后问题消失,隔一段时间又会反复出现.今天在这里来仔细剖析下多线程情况下HashMap所带来的问题 ...

  6. (转载)GRASP职责分配原则

    GRASP (职责分配原则) 要学习设计模式,有些基础知识是我们必须要先知道的,设计模式是关于类和对象的一种高效.灵活的使用方式,也就是说,必须先有类和对象,才能有设计模式的用武之地,否则一切都是空谈 ...

  7. JS中的 ES6新类型iterable

    1.1 iterable字面意思:可迭代的,可重复的 iterable是ES6标准引入的新的类型.而Array.Map和Set都属于iterable类型 1.2 为什么加入iterable类型? 遍历 ...

  8. 【深入JavaScript】一种JS的继承方法

    这些天读了John Resig的<Secrets of JavaScript Ninja>,其中讨论到JS中实现继承的方案,非常有趣,自己探索了一下,形成了笔记,放到这里. 这个方案在Re ...

  9. Form身份验证

    Forms身份验证Web.config<system.web><authentication mode="Forms">            <fo ...

  10. Spring Boot学习笔记(三)实现热部署

    pom文件中添加如下依赖即可 <dependency> <groupId>org.springframework.boot</groupId> <artifa ...