<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. python http 请求 响应 post表单提交

    1. 查看请求 响应情况 print(response.text) print(response.headers) print(response.request.body) print(respons ...

  2. shell 键盘输入

    命令:read 从键盘读入数据,赋值变量 [root@ssgao shell]# cat b.sh #!bin/bash read a b c echo "a is : ${a}" ...

  3. Win10系列:VC++ Direct3D开发基础1

    在介绍如何使用Direct3D项目模版来绘制立体图形之前,首先为读者介绍在Direct3D应用程序开发过程中涉及到的一些常用概念. (1)资源 资源是指可以被Direct3D图形管线所访问的内存空间, ...

  4. 【oracle】oracle REGEXP_SUBSTR分割字符串

    REGEXP_SUBSTR的使用:通过REGEXP_SUBSTR进行数据分割: , LEVEL, 'i') AS STR FROM DUAL CONNECT BY LEVEL <= LENGTH ...

  5. Mysql 行存储的文件格式

    一.Mysql行存储的文件格式概述 InnoDB存储引擎有两种文件格式 Antelope:compact与redundant两种行记录格式 Barracuda:compress与dynamic两种行记 ...

  6. Java四个常用正则表达

     1.查询   以下是代码片段: String str="abc efg ABC";String regEx="a|f"; //表示a或fPattern p=P ...

  7. list的四种遍历方式

    1.手先增强for循环和iterator遍历的效果是一样的,也就说 增强for循环的内部也就是调用iteratoer实现的,但是增强for循环 有些缺点,例如不能在增强循环里动态的删除集合内容.不能获 ...

  8. 愛拼才會贏--IPA--闽南语

    闽南语经典曲目.

  9. 总结小bug

    1.下拉刷新问题 //不要用scroll-view 他会阻止刷新 //改用view <template name="movieGridTemplate"> <!- ...

  10. layer 问题 汇总

    1.搭配iframe  子页面遮罩层 覆盖父页面 window.parent.layer.open({      // type: 1, //skin: 'layui-layer-rim', //加上 ...