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 ...
随机推荐
- python日期加减法操作
对日期的一些操作: 对日期的一些操作: 1 #日期转化为字符串并得到指定(或系统日期)n天后的日期--@Eillot 2 def dataTimeToString(dsNow=ReservationT ...
- Python加密保护解决方案
防止代码反编译,高强度加密保护exe或pyc文件 产品简介 Python语言写的程序无需编译成二进制文件代码,可以直接从源代码运行程序.在计算机内部,Python解释器把源代码转换成字节码的中间形式, ...
- openshift 容器云从入门到崩溃之六《Source-to-Image》
上次说到了怎么在oc上面部署应用而且说道了怎么定义模板部署应用,也许你会奇怪那个我代码打包编译在哪一步,那就要说道oc的s2i流程了 下面是基本s2i流程 1.制作base-image镜像 要使用s2 ...
- XMLHttpRequest请求被劫持
十几个请求中随机一个转到 <html><head><script language="javascript">setTimeout(" ...
- 9个用来爬取网络站点的 Python 库
上期入口:10个不到500行代码的超牛Python练手项目 1️⃣Scrapy 一个开源和协作框架,用于从网站中提取所需的数据. 以快速,简单,可扩展的方式. 官网:https://scrapy.or ...
- 2019年度【计算机视觉&机器学习&人工智能】国际重要会议汇总
简介 每年全世界都会举办很多计算机视觉(Computer Vision,CV). 机器学习(Machine Learning,ML).人工智能(Artificial Intelligence ,AI) ...
- MySQL 5.6 (Win7 64位)下载、安装与配置图文教程
一． 工具 Win7 64位操作系统 二． 步骤 第一步:下载安装包 下载 地址:http://www.mysql.com/ 截止到目前(2016/7/24) ,官网的最新版本是5.7.13,不过自己 ...
- Analysis of FCN
全卷积网络 FCN 详解 背景 CNN能够对图片进行分类,可是怎么样才能识别图片中特定部分的物体,在2015年之前还是一个世界难题.神经网络大神Jonathan Long发表了<Fully ...
- TLS握手、中断恢复与证书中心的原因
在双方都拿到随机数A.B.C后,将会使用这三个随机数生成一个对话密钥,然后使用该对话密钥进行对称加密通信,这种方式我们可以看到,安全性取决于随机数C的加密,前面的几个都是明文传的,这里就取决于服务器的 ...
- Linux 查看磁盘读写速度IO使用情况
# 查看io进程 命令:iotop 注:DISK TEAD:n=磁盘读/每秒 DISK WRITE:n=磁盘写/每秒. 注:标黄的可查看磁盘的读写速率,下面可以看到使用的io ...