<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. IOS中position:fixed弹出框中的input出现光标错位的问题

    解决方案是 在弹框出现的时候给body添加fixed <style type="text/css"> body{ position: fixed; width: 100 ...

  2. Vscode extensions开发

    Vscode extensions开发   1◆ generatorcode install npm install -g yo generator-code     2◆ 步骤 yo code   ...

  3. linux下/proc/diskstats文件详解

    每一列的含义分别为: 第一列为 设备号 (number of issued reads. This is the total number of reads completed successfull ...

  4. ubuntu16.10安装搜狗输入法

    一.搜狗输入法安装 1.首先到搜狗输入法官网下载搜狗输入法,下载的是个deb文件. 搜狗输入法Linux版下载地址:http://pinyin.sogou.com/linux/?r=pinyin 2. ...

  5. RabbitMQ direct类型的Exchange

    就目前来说,Exchange是与消息发送端有关的,因为它可以指定将消息发送到哪个或哪些队列中. 本篇文章介绍的direct类型就是指定将消息定向发送到哪个队列中. direct,顾名思义,就是直接的意 ...

  6. 读书笔记 C# Type类型与泛型有关的某些属性浅析

    IsGenericType 如果类型为泛型,则返回 true. GetGenericArguments 返回 Type 对象数组,这些对象表示为构造类型提供的类型变量,或泛型类型定义的类型参数.如果是 ...

  7. 读书笔记 C#事件event浅析(一)

    在C#中,所谓event事件,就是一种特殊的委托.如果要声明事件,首先就要声明一个相对应的委托类型.按照流程来说,事件相当于委托类型往上升了一级似的,我是这样认为的. //1.先声明委托类型 publ ...

  8. 最短路径:Dijkstra & Floyd 算法图解,c++描述

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. [leetcode53]最长子数组 Maximum Subarray Kadane's算法

    [题目] Given an integer array nums, find the contiguous subarray (containing at least one number) whic ...

  10. c++的读入txt文件(转)

    因为学姐的项目需要,要用到excel的读入读出,百度过后发现txt的读入读出比较简单,于是,我采用了先把excel转成txt,然后再读入. 方法是csdn上的天使的原地址:   https://blo ...