& .cicle{
          position: relative;
          float: right;
          margin-right: -1rem;
          vertical-align: middle;
          width: 1.4rem;
          height: 1.4rem;
          border: 1px solid #3399ff;
          border-radius: 50%;
        }
        & .select:after {
          content: '\00a0';
          display: inline-block;
          border: 2px solid #3399ff;
          border-top-width: 0;
          border-right-width: 0;
          width: 9px;
          height: 5px;
          -webkit-transform: rotate(-50deg);
          position: absolute;
          top:3px;
          left:2px;
        }

纯CSS写的对勾样式的更多相关文章

  1. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  2. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  3. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

  4. 纯CSS实现加载转圈样式

    不同的项目中对于等待加载时转圈圈的样式是不同的,有的是传统的转圈的gif图片,见得比较多的是将转圈圈的换成了可爱的图标.有时候项目中加入等待加载的图片会很违和,不符合美观,所以需要用CSS做一个.下面 ...

  5. 纯CSS打造好看的按钮样式

    好看的按钮.链接.div样式,效果预览: http://hovertree.com/code/run/css/s8o19792.html 发现今天积分和排名不错: 代码如下: <!DOCTYPE ...

  6. 还在为小三角形切图?使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  7. 纯CSS写九宫格样式,高宽自适应正方形

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  8. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  9. 用纯css写出三角形

    1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...

随机推荐

  1. 暴力破解unix/linux平台上采用crypt加密的口令

    # coding=utf-8 ''' 暴力破解crypt模块加密的密码 ''' import crypt import optparse usage = 'Usage: %prog [optinos] ...

  2. 跨域,Content-Type组件

    1,跨域:是浏览器的同源策略 阻止ajax请求不组织src请求 2,一个源的定义:如果两个页面的协议,端口(如果由指定)和域名都相同,则两个页面具有相同的源 下面给出相对http://a.xyz.co ...

  3. JavaScript中面向对象那点事

    鉴于自己在JavaScript这方面比較薄弱.所以就找了一本书恶补了一下(被称为犀利书的JavaScript权威指南).书的内容尽管多了点,但这也充分说明了js中的东西还是挺多的.尽管我们的定位不是前 ...

  4. YTU 2901: G-险恶逃生II

    2901: G-险恶逃生II 时间限制: 1 Sec  内存限制: 128 MB 提交: 44  解决: 14 题目描述     SOS!!!koha is trapped in the danger ...

  5. MARGIN-BEFORE MARGIN-AFTER MARGIN-START MARGIN-END

    总的来说:这是CSS3.0的对于文章段P容器的定义方法语句!display:block这个样式,只定义了P容器为一个块;后面四句是CSS3中的样式定义方法:-webkit-margin-before: ...

  6. Ural2089:Experienced coach(二分图匹配)

    Misha trains several ACM teams at the university. He is an experienced coach, and he does not undere ...

  7. 洛谷 P2444 [ POI 2000 ] 病毒 —— AC自动机+dfs

    题目:https://www.luogu.org/problemnew/show/P2444 AC自动机上 dfs,不走结尾点,如果走出环就是有无限长度的串: RE无数,原来是数组开成 2000 的了 ...

  8. [转]Python3 字典 items() 方法

    原文Python3 字典 items()方法 描述 Python 字典 items() 方法以列表返回可遍历的(键, 值) 元组数组. 语法 items()方法语法: dict.items() 参数 ...

  9. hdu4352(数位DP + LIS(nlogn))

    题目描述: 给定一个区间中,将区间的每一个数看成一个字符串,求这个区间内每个字符串的最大上升 子序列等于k的个数. 可以采用nlogn的LIS(用一个C数组记录长度为i的最大上升子序列的结尾最小值), ...

  10. bzoj3620

    KMP 我似乎复杂度写的不对... 因为位置相同只算一次,后缀数组什么的都不管用了,我们就暴力kmp,但是我写的是暴力跳...竟然过了...我写bzoj3670才发现... #include<c ...