<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.block{
background:skyblue;
height:60px;
width:60px;
position: relative;
border-radius: 10px;
} .block:before{
border-top-right-radius: 60px;
background: white;
position: absolute;
left: 0;
bottom: 0;
content: '';
display: block;
width: 20px;
height: 20px;
} .block:after{
border-bottom-left-radius: 60px;
background: white;
position: absolute;
right: 0;
top: 0;
content: '';
display: block;
width: 20px;
height: 20px;
}
</style>
</head> <body>
<div class="block"></div>
</body> </html>

  

div凹角实现的更多相关文章

  1. css实现div内凹角样式

    平常的开发中我们一般使用到圆角都是外凸的,即border-radius属性.而如果有内凹角的情况,我们一般的考虑实现方法有2种.一种是直接使用背景图片,一种是使用css. 用到的属性则是backgro ...

  2. IE6/7下空div占用空间的问题

    最近注意力没在前端上面,工作碰到这样一个问题,下意识的写了句 font-size:0;line-height:0;哪知道引发了更大的bug.后来插入数据进去的时候都不显示了..再后来百度一番找到,原来 ...

  3. div实现自适应高度的textarea,实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  4. 冒泡,setinterval,背景图的div绑定事件,匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

  5. css居中div的几种常用方法

    在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...

  6. Div Vertical Menu ver5

    这个小功能,如果是算此次,已经是第5次修改了.可以从这里看到前4次:V1, http://www.cnblogs.com/insus/archive/2011/10/17/2215637.html V ...

  7. 计算Div标签内Checkbox个数或已被disabled的个数

    先看下面的html: 计算div内的checkbox个数:$('#divmod input[type="checkbox"]').length 计算div内checkbox被dis ...

  8. [jquery]显示隐藏div标签的几种方法

    1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...

  9. CSS3变形记(上):千变万化的Div

    传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...

随机推荐

  1. Oarcle 之连接查询

            连接查询:连接查询是关系数据库中最主要的查询,主要包括内连接.外连接和交叉连接等.通过连接运算符可以实现多个表查询.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的 ...

  2. Python-----多线程threading用法

    threading模块是Python里面常用的线程模块,多线程处理任务对于提升效率非常重要,先说一下线程和进程的各种区别,如图 概括起来就是 IO密集型(不用CPU) 多线程计算密集型(用CPU) 多 ...

  3. Can't locate Params/Validate.pm in @INC (@INC contains: /usr/local/lib64/perl5 /

    今天 安装 MHA,管理节点选 mha4mysql-manager-0.58,在初始化时报错 [root@Server3 ~]# masterha_check_repl  --conf=/etc/ma ...

  4. ubuntu 17.10 安装mvn

    首先,我用的系统是Ubuntu17.10,编辑器用的 vim ,Maven以 3.5.0为例 第一步,去官网下载maven. 官网下载页面.png 第二步,解压到/opt/maven目录(我安装在这个 ...

  5. iframe父子操作

    1.js在iframe子页面操作父页面元素代码: window.parent.document.getElementByIdx_x("父页面元素id"); 2.js在父页面获取if ...

  6. python经典程序

    输入输出 #判断输入整数是否在[0,100]之间 num = eval(input("请输入一个整数:")) if num > 100 or num < 0: #判断[ ...

  7. 分治(超级easy 不要看)

    P1226快速幂 #include<bits/stdc++.h> using namespace std; #define int long long ; int f(int b,int ...

  8. SpringIOC的概念理解、构造器注入、setter注入、p命名空间注入、IOC容器介绍与比较

    1.IOC概念理解 IOC(Inversion of Control)即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象 ...

  9. Lintcode489-Convert Array List to Linked List-Easy

    489. Convert Array List to Linked List Convert an array list to a linked list. Example Example 1: In ...

  10. 13_文件系统访问列表_case语句及脚本选项

    FACL:Filesystem Access Control List利用文件扩展保存额外的访问控制权限 setfacl: -m:设定 u:UID:perm g:GID:perm root@kali: ...