css绘制内扣圆角
纯静态的一种效果绘制，避免使用图标浪费内存。效果如下
废话不多说，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle</title>
<style type="text/css">
#app{
width:300px;height:200px;position: relative;box-sizing: border-box;padding:10px;
}
.box{
width:100%;height:100%;border:2px solid #f00;
}
.circle{
display: block;width:20px;height:20px;border:2px solid transparent;position: absolute;z-index: 1;background:#fff;
}
.top-left{
left:10px;top: 10px;border-right-color: #f00;border-bottom-color: #f00;border-radius:0 0 20px 0;
}
.top-right{
right: 5px;top: 10px;border-left-color: #f00;border-bottom-color: #f00;border-radius:0 0 0 20px;
}
.btm-left{
left: 10px;bottom:6px;border-right-color: #f00;border-top-color: #f00;border-radius:0 20px 0 0;
}
.btm-right{
right: 6px;bottom: 6px;border-left-color: #f00;border-top-color: #f00;border-radius:20px 0 0 0;
}
</style>
</head>
<body>
<div id="app">
<div class="box"></div>
<i class="circle top-left"></i>
<i class="circle top-right"></i>
<i class="circle btm-left"></i>
<i class="circle btm-right"></i>
</div>
</body>
</html>
效果二：
相比第一种效果，增加了四角的曲别针效果，完整代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle</title>
<style type="text/css">
.cont{
height:300px;
box-sizing: border-box;padding:10px;
position: relative;
} .icon-box{
width:60px;height:60px;border:2px solid #f00;position: absolute;overflow: hidden;
}
.icon-top-left{
left: 0;top: 0;border-right-color: transparent;border-bottom-color: transparent;border-radius:10px 0 0 0;
}
.icon-top-right{
right: 0;top: 0;border-left-color: transparent;border-bottom-color: transparent;border-radius:0 10px 0 0;
}
.icon-btm-left{
left: 0;bottom: 0;border-right-color: transparent;border-top-color: transparent;border-radius:0 0 0 10px;
}
.icon-btm-right{
right: 0;bottom: 0;border-left-color: transparent;border-top-color: transparent;border-radius:0 0 10px 0;
} .icon-box i{
display: block;width:18px;height:18px;border-radius:50%;border:2px solid #f00;position: absolute;z-index: 2;
}
.icon-top-left i{
left: -2px;top: -2px;
}
.icon-top-right i{
right: -2px;top: -2px;
}
.icon-btm-left i{
left: -2px;bottom: -2px;
}
.icon-btm-right i{
right: -2px;bottom: -2px;
} .app{
width:100%;height:100%;
position: relative;box-sizing: border-box;padding:5px 7px 7px 6px;
}
.box{
width:100%;height:100%;border:2px solid #f00;
}
.circle{
display: block;width:20px;height:20px;border:2px solid transparent;position: absolute;z-index: 1;background:#fff;
}
.top-left{
left:6px;top: 5px;border-right-color: #f00;border-bottom-color: #f00;border-radius:0 0 20px 0;
}
.top-right{
right: 3px;top:5px;border-left-color: #f00;border-bottom-color: #f00;border-radius:0 0 0 20px;
}
.btm-left{
left: 6px;bottom:3px;border-right-color: #f00;border-top-color: #f00;border-radius:0 20px 0 0;
}
.btm-right{
right: 3px;bottom: 3px;border-left-color: #f00;border-top-color: #f00;border-radius:20px 0 0 0;
}
.box img{
display: block;width:100%;height:100%;
}
</style>
</head>
<body>
<div class="cont">
<div class="icon-box icon-top-left"><i></i></div>
<div class="icon-box icon-top-right"><i></i></div>
<div class="icon-box icon-btm-left"><i></i></div>
<div class="icon-box icon-btm-right"><i></i></div>
<div class="app">
<div class="box"><img src="img_src" alt=""></div>
<i class="circle top-left"></i>
<i class="circle top-right"></i>
<i class="circle btm-left"></i>
<i class="circle btm-right"></i>
</div>
</div>
</body>
</html>
css绘制内扣圆角的更多相关文章
- css边框内凹圆角，解决优惠券的边框问题
关于css边框内凹圆角,找了好久才找到的 <html <head> <title>无标题页</title> <style> body{ backg ...
- CSS实现多重边框和内凹圆角
CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- CSS布局技巧 -- 内凹圆角
圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...
- CSS-论css如何纯代码实现内凹圆角
background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px); 这是做内凹圆角的核心代码,就是背景图的ra ...
- CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 摘记 史上最强大的40多个纯CSS绘制的图形（一）
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 史上最强大的40多个纯CSS绘制的图形
Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...
- 40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
随机推荐
- what's the 跳空
出自 MBA智库百科(https://wiki.mbalib.com/) 什么是跳空 跳空在日语中叫“窗口”,英语是“gap”,又称为即价格跳空,是指汇率在快速波动时产生的曲线的最低价与曲线的最高价之 ...
- mysql插入数据会变中文
db.url=jdbc:mysql://192.168.0.149:3306/pack_platform_dev?useUnicode=true&characterEncoding=utf-8 ...
- GDB查看堆栈局部变量
GDB查看堆栈局部变量 “参数从右到左入栈”,“局部变量在栈上分配空间”,听的耳朵都起茧子了.最近做项目涉及C和汇编互相调用,写代码的时候才发现没真正弄明白.自己写了个最简单的函数,用gdb跟踪了调用 ...
- 利用StateListDrawable给button动态设置背景
项目中,遇到相同样式的Button,只是stroke颜色不一样.为了实现一个,就得写两个shape文件,一个selector文件:多个还得重复写. 解决方法: 结合StateListDrawable给 ...
- Keras序列模型学习
转自:https://keras.io/zh/getting-started/sequential-model-guide/ 1.顺序模型是多个网络层的线性堆叠. 你可以通过将网络层实例的列表传递给 ...
- 【Linux】-NO.87.Assembly.1.滴水逆向.1.001-【介绍】-
1.0.0 Summary Tittle:[Linux]-NO.87.Assembly.1.滴水逆向.1.001-[基础]- Style:Java Series:Log4j Since:2017-04 ...
- Docker：Dockerfile命令详解
1.FROM 功能为指定基础镜像,并且必须是第一条指令. 如果不以任何镜像为基础,那么写法为:FROM scratch. 同时意味着接下来所写的指令将作为镜像的第一层开始 语法: FROM <i ...
- mysql数据据备份与还原
http://www.cnblogs.com/kissdodog/p/4174421.html备份:mysqldump -u username -p dbname > BackupName.sq ...
- Eclipse安装svn插件的几种方式（转）
1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意)和Location(插件的URL),点击 ...
- Electron把网页打包成桌面应用并进行源码加密
前言 最近想把自己用html+css+js做的网页界面打包成桌面应用,网上一搜,发现Electron是一个不错的选择,试了试,发现效果真的不错.这里记录一下打包过程以作记录,便于自己以后查看学习. 一 ...