纯静态的一种效果绘制,避免使用图标浪费内存。效果如下

废话不多说,代码如下:

<!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绘制内扣圆角的更多相关文章

  1. css边框内凹圆角,解决优惠券的边框问题

    关于css边框内凹圆角,找了好久才找到的 <html <head> <title>无标题页</title> <style> body{ backg ...

  2. CSS实现多重边框和内凹圆角

    CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  3. CSS布局技巧 -- 内凹圆角

    圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...

  4. CSS-论css如何纯代码实现内凹圆角

    background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px); 这是做内凹圆角的核心代码,就是背景图的ra ...

  5. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  6. 摘记 史上最强大的40多个纯CSS绘制的图形(一)

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  7. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  8. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  9. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

随机推荐

  1. Spring Data JPA框架

    1.前言 扔一个 spring data jpa 的代码,可运行,后续补充博客内容. 环境:eclipse + tomcat8 2.部分截图 3.源码 https://gitee.com/niceyo ...

  2. https证书随记

    下载证书之后: 1:域名跳转操作 <system.webServer>         <rewrite>             <rules>          ...

  3. pytorch预训练模型的下载地址以及解决下载速度慢的方法

    https://github.com/pytorch/vision/tree/master/torchvision/models 几乎所有的常用预训练模型都在这里面 总结下各种模型的下载地址: 1 R ...

  4. GDScript 格式化字符串

    GDScript offers a feature called format strings, which allows reusing text templates to succinctly c ...

  5. Java代码质量改进之:同步对象的选择

    在Java中,让线程同步的一种方式是使用synchronized关键字,它可以被用来修饰一段代码块,如下: synchronized(被锁的同步对象) { // 代码块:业务代码 } 当synchro ...

  6. codeforces 982A Row

    题意: 一个01串是否合法满足以下两个要求: 1.没有两个相邻的1: 2.在满足第一个条件的情况下,不能再放下更多的1. 判断一个给定的串是否合法. 思路: 最近cf的A怎么都这么坑啊... 首先是判 ...

  7. Flask最强攻略 - 跟DragonFire学Flask - 第十五篇 Flask-Script

    其实本章就是为下一章做的铺垫啦,但是也要认真学习哦 Flask-Script 从字面意思上来看就是 Flask 的脚本 是的,熟悉Django的同学是否还记得Django的启动命令呢? python ...

  8. Windows磁盘映射读写远程主机文件

    执行CMD命令做磁盘映射:net use X: \\172.17.0.1\D$\test Password /USER:Administrator Java调用CMD String cmd = &qu ...

  9. java之导入excel

    接口: /** * * Description: 导入excel表 * @param map * @param request * @param session * @return * @author ...

  10. win10忘记开机密码无法进入桌面

    第一种: 电脑用微软账户登录,但密码始终不正确. 登陆这个网址    https://account.live.com/password/reset 按照提示的操作利用之前注册信息一步步重设密码 最后 ...