css完成下图

<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完成下图的更多相关文章
- css画下图
通常我看到这种效果,都是直接ps解决,但是不断重申性能的今天,显然不适应时代的需求啊! 今天看到群里有人问这种效果怎么做了,我在思考的时候,有人已经给出答案了: 我就测试了一下,发现确实可以实现,总结 ...
- 用css伪类实现提示框效果
题目要求用css实现下图效果: 很明显难点就在那个多出去的三角形上,下面代码是用一个div来实现的,用到了伪类 : befor和 : after,使用这两个伪类活生生的在div之前和之后多出了&quo ...
- css实现的透明三角形
css实现下图样式,具体像素值记不住了,很好设置,html code (2014百度秋招面试题): <div id="demo"></div> 分析:这 ...
- chrome 调试 SASS
第一步: 执行sass预编译命令 先来我的项目文件夹结构: ->进入sass /css文件下->打开cmd命令 ->输入sass --watch --scss test.scss: ...
- springmvc 精华
Spring Mvc简介: Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求 ...
- 拒绝QQ空间-手把手教你美化博客
为什么要美化? 博客园的主题看起来是有一些年代感了,应该是不符合当代大学生的审美了,起码我就觉得不行,所以我们要进行一些美化,但是搞技术的人的博客不应该搞得花里胡哨,最好是简洁一些(个人想法),网上有 ...
- SpringMvc入门四----rest风格Url
知识点: REST风格URL简介 SpringMvc对rest风格的支持 @PathVariable 获取 Url 变量 SpringMvc对静态资源的处理 REST风格URL简介: 我们平时看到的s ...
- 微信小程序在sublime开发代码高亮显示
问题:xxx.wxml 和xxx.wxss在subline中不高亮不显示 如下图,开发起来非常的不方便 解决办法:右下角将Plain Text改为Html,问题解决,可高亮,提高代码可读性,可提示,提 ...
- 【selenium】- webdriver常见元素定位(中)
本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1.By.tagName 遇到hidden就break,继续下一个循环. 2.By.linkText 对上图中的“糯米”进行定位: 3.By. ...
随机推荐
- 使用AndroidStudio导入github项目
1.在studio中配置github的项目地址 2.当你点击github,会这个样子 3.此处放你要clone的地址 ,然后点击clone. 4.等一会会出现这个页面,然后点击yes ,会出现这个页面 ...
- C#代码中如何比较两个日期的大小?
C#中比较两个日期大小的方法 /// <summary> /// 比较两个日期大小 /// </summary> /// <param name="dateSt ...
- NSIS笔记
1.IfFileExists IfFileExists D:\SA\test\testdirectory\*.* 0 +1 判断testdirectory是否是一个目录,若是,则执行接下来的第一行代码 ...
- Python自然语言处理---信息提取
1.数据 目前的数据总体上分为结构化和非结构化的数据.结构化的数据是指实体和关系的规范和可预测的组织.大部分的需要处理的数据都属于非结构化的数据. 2.信息提取 简言之就是从文本中获取信息意义的方法. ...
- fast-rcnn里的一些具体内容
NMS:Non-Maximum Suppression(非极大值抑制) 假设从一个图像中得到了2000个region proposals,通过在RCNN和SPP-net之后我们会得到2000*4096 ...
- tomcat的安装及配置
1.首先进tomcat官网下载zip压缩文件:http://tomcat.apache.org/download-90.cgi 2.解压缩到指定文件压(后面配置环境变量会用到) 3.配置环境变量 4. ...
- OpenStack之queens版本创建负载均衡器时报错问题!
采用kolla-ansible部署完毕后,创建负载均衡器时会提示如下的报错 解决办法: 修改网络节点的neutron-lbaas-agent容器 进入lbaas容器里 [root@openstack0 ...
- python中的运算符归类
运算符 目标 算数运算符 比较(关系)运算符 逻辑运算符 赋值运算符 成员运算符 运算符的优先级 数学符号表链接:https://zh.wikipedia.org/wiki/数学符号表 01. 算数运 ...
- synchronized(六)
package com.bjsxt.base.sync006;/** * 锁对象的改变问题 * @author alienware * */public class ChangeLock { priv ...
- ubuntu安装nodejs,npm live-server
sudo apt-get install curl 先安装的是curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/in ...