<div></div>
div{
height: 48px;
width: 80px;
padding: 0 16px 0 32px;
background: rgba(0,0,0,.6);
position: relative;
overflow: hidden;
}
div:after{
display: block;
content: "";
height: 24px;
width: 24px;
position: absolute;
top: 12px;
right: -12px;
background: #FFFFFF;
border-radius: 50%; }
 

css完成下图的更多相关文章

  1. css画下图

    通常我看到这种效果,都是直接ps解决,但是不断重申性能的今天,显然不适应时代的需求啊! 今天看到群里有人问这种效果怎么做了,我在思考的时候,有人已经给出答案了: 我就测试了一下,发现确实可以实现,总结 ...

  2. 用css伪类实现提示框效果

    题目要求用css实现下图效果: 很明显难点就在那个多出去的三角形上,下面代码是用一个div来实现的,用到了伪类 : befor和 : after,使用这两个伪类活生生的在div之前和之后多出了&quo ...

  3. css实现的透明三角形

    css实现下图样式,具体像素值记不住了,很好设置,html code (2014百度秋招面试题): <div id="demo"></div>   分析:这 ...

  4. chrome 调试 SASS

    第一步: 执行sass预编译命令 先来我的项目文件夹结构: ->进入sass /css文件下->打开cmd命令 ->输入sass --watch --scss  test.scss: ...

  5. springmvc 精华

    Spring Mvc简介: Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求 ...

  6. 拒绝QQ空间-手把手教你美化博客

    为什么要美化? 博客园的主题看起来是有一些年代感了,应该是不符合当代大学生的审美了,起码我就觉得不行,所以我们要进行一些美化,但是搞技术的人的博客不应该搞得花里胡哨,最好是简洁一些(个人想法),网上有 ...

  7. SpringMvc入门四----rest风格Url

    知识点: REST风格URL简介 SpringMvc对rest风格的支持 @PathVariable 获取 Url 变量 SpringMvc对静态资源的处理 REST风格URL简介: 我们平时看到的s ...

  8. 微信小程序在sublime开发代码高亮显示

    问题:xxx.wxml 和xxx.wxss在subline中不高亮不显示 如下图,开发起来非常的不方便 解决办法:右下角将Plain Text改为Html,问题解决,可高亮,提高代码可读性,可提示,提 ...

  9. 【selenium】- webdriver常见元素定位(中)

    本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1.By.tagName 遇到hidden就break,继续下一个循环. 2.By.linkText 对上图中的“糯米”进行定位: 3.By. ...

随机推荐

  1. Springboot+Mybatis批量导入多条数据

    在Mapper.xml最下面填写 <!-- 批量插入生成的兑换码 --> <insert id ="insertCodeBatch" parameterType= ...

  2. 学习笔记-AngularJs(六)

    在学习笔记-AngularJs(五),通过引入bootstrap.css进行改写整个样式,这时学习项目也变得好看多了,现在我们又需要目录再进行一次改变,如下图: 这样就符合之前讲的对学习目录进行布置了 ...

  3. PAT-GPLT训练集 L1-043 阅览室

    PAT-GPLT训练集 L1-043 阅览室 注意:连续的S和E才算一次借还 代码: #include<iostream> #include<cstdio> using nam ...

  4. Win10系列:C#应用控件基础5

    ListBox控件 上一小节介绍的ComboBox控件在外观上仅显示当前选中的选项,通过单击此控件文本框才能看到其他选项,而ListBox控件能够以列表形式始终显示选项.在ListBox控件中可以添加 ...

  5. 真实分享记录我学习Linux系统遇到的问题

    对于linux,又爱又恨,也有自己的一些看法,毕竟已经接触了快两年了.但是,说出来都是伤,为什么呢?如果您想知道请让我给您慢慢道来. 最开始接触linux是在高考完后,由于我家的台式电脑太卡,于是我就 ...

  6. cocos2d方块方块

    cGridSize=32 cSceneWidth=8+2 cSceneHeight=18 fuction Grid2Pos(x,y) local visibleSize=cc.Director:get ...

  7. SmtpClient SSL 发送邮件异常排查

    上周使用 SmtpCliet 发送邮件测试,在服务端配置 SSL 465 / 993 情况 ,客户端使用 465 SSL 端口发送邮件异常,测试代码如下: System.Net.ServicePoin ...

  8. PSP0级记录2

                              上课         编写程序               课外资料               日总计     3.13 周一           ...

  9. 深入理解java虚拟机---java虚拟机内存管理(五)

    1.深入理解java虚拟机 总图: 1.线程共享区: 2.线程独占区: 1.程序计数器 理解为当前线程锁执行的字节码的行号指示器,程序计数器没有内存异常错误.

  10. 延迟载入Dll(动态载入Dll)

    windows核心编程(第五版)20.3节的延迟载入Dll 延迟载入Dll技术出现的原因: 因为DLL的加载是比较浪费时间的,特别是大型软件加载,因此,这项技术是在应对软件初始化过程中避免浪费太多的时 ...