<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. Linux升级内核教程(CentOS7)

    1.查看当前内核版本 uname -r 2.通过yum升级内核 通过yum升级内核是最保险的升级方式,因为安装的是操作系统发行厂商验证过兼容性的rpm包,升级风险一般很小. yum install - ...

  2. Java反序列化修复方案

    1)下载与当前大版本相同的commons-collections包(原来是3.2.x就替换为3.2.2,原来是4.x就替换为4.4.1) 下载链接:http://commons.apache.org/ ...

  3. win10装机重装系统

    win10装机     1● u启制件   http://www.laomaotao.org.cn/     http://www.laomaotao.org.cn/     2● 目标盘 3● 安装 ...

  4. Java Web(十) 分页功能

    分页 分页的使用非常普遍,现在一步步的把分页功能实现出来,先看看已经写好的效果: 该页面的所有数据都存放在一个javaBean对象(PageBean)里,每次访问该页面时,Serlvet就会把page ...

  5. malloc用法整理

    malloc函数原型:void *malloc(unsigned int num_bytes); //分配长度为num_bytes字节的内存块 返回值是void指针,void* 表示未确定类型的指针, ...

  6. spring boot 打jar包

    想必大家经常会出现以下报错信息 java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Fai ...

  7. 一: Docker的概念

    附件:https://files.cnblogs.com/files/chaos-li/docker-k8s-devops-master-9287a2ca56433ca076078b564de9488 ...

  8. :代理模式:proxy

    #ifndef __PROXY_H__ #define __PROXY_H__ class Subject { public: Subject(){} virtual ~Subject(){} vir ...

  9. java泛型讲解

    原文: https://blog.csdn.net/briblue/article/details/76736356 泛型,一个孤独的守门者. 大家可能会有疑问,我为什么叫做泛型是一个守门者.这其实是 ...

  10. Xilinx SDK编译Microblaze时出错

    reference:http://www.eeboard.com/evaluation/digilent-cmod-a7-fpga/9/ 在vivado 2015.4中创建microblaze软核,l ...