<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. git报错fatal: I don't handle protocol '​https'处理

    一.背景说明 今天使用在Cygwin中git clone时报fatal: I don't handle protocol '​https',如下: 以为是Cygwin实现的git有点问题没太在意,换去 ...

  2. php 异常捕获的坑

    thinkphp 框架需要注意 书写为(Exception $e)将无效   需要写成 (\Exception $e) try { throw new \Exception("Error P ...

  3. python http 请求 响应 post表单提交

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

  4. 快捷键设置 keyiing.json

    // 快捷键设置 keyiing.json // 将键绑定放入此文件中以覆盖默认值 [     /* // 转换大写     {         "key" : "ctr ...

  5. webpack分离打包css和less

    github仓库:https://github.com/llcMite/webpack.git 为什么要分离打包?       答:刚开始学webpack的时候就很郁闷,明明没几个文件,打包出来体积特 ...

  6. OO第一阶段总(休)结(养)分(生)析(息)

    第一次作业: 这是一次让我认识到ddl面前潜力真的可以无限大的作业. 一直以为OO是一门和数据结构一样先用几周的时间讲讲Java然后写写”Hello World”小程序再开始讲正课的我(我也不知道为什 ...

  7. 【转载】OpenCV 摄像头控制

    参考:[OpenCV] -- 简单摄像头操作 - 代码人生 - 博客频道 - CSDN.NET http://blog.csdn.net/qiurisuixiang/article/details/8 ...

  8. Java使用POI插件将数据以excel形式备份

    将数据以表格形式进行备份 (1)导入poi的jar包 放入lib下:  WebRoot\WEB-INF\lib\poi-3.2-FINAL-20081019.jar 下载链接:https://gith ...

  9. 【阿圆实验】Grafana HA高可用方案

    一.实现Grafana高可用 1.Grafana实现高可用性有两步: >>使用共享数据库存储仪表板,用户和其他持久数据>>决定如何存储会话数据. 2.Grafana高可用部署图 ...

  10. DevExpress ASP.NET v18.2新功能详解(四)

    行业领先的.NET界面控件2018年第二次重大更新——DevExpress v18.2日前正式发布,本站将以连载的形式为大家介绍新版本新功能.本文将介绍了DevExpress ASP.NET Cont ...