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 ...
随机推荐
- C#基础加强(1)之索引器
索引器 介绍 索引器,初学者可能听起来有些陌生,但其实我们经常会用到它,例如: // 字符串的索引器 string str = "hello world"; ]; // 获取到字符 ...
- python框架之Django(4)-视图&路由
视图 负责接收请求和返回响应 FBV和CBV FBV FBV(function base views) 就是在视图里使用函数处理请求. from django.conf.urls import url ...
- python中接入支付宝当面付
准备 由于正式环境需要商户信息,所以这里使用支付宝提供的沙箱环境.切换到正式环境后只需稍改配置. 1.点击进入蚂蚁金服平台官网. 2.如下图选择:开发者中心->开发服务下的研发服务->沙箱 ...
- Scrapy工作原理
目录 1. Scrapy旧版架构图(绿线是数据流向) 2. Scrapy新版架构图 1. 组件介绍 2. 数据流(Data Flow) 3. 使用Scrapy框架爬虫的重要命令 4. Middlewa ...
- 11.c#类的成员初始化顺序
转自http://www.cnblogs.com/siceblue/archive/2009/01/15/1376430.html C#作为一种纯面向对象的话言,为它编写的整个代码里面到处都离不开对象 ...
- #WEB安全基础 : HTTP协议 | 0x3 TCP三次握手和DNS服务
TCP三次握手精准无误地把数据送达目标处,TCP协议把数据包送出去后,向对方确认是否成功发送,握手过程中使用了TCP的标志(flag)——SYN和ACK 请看图 若握手中断,TCP协议再次从同样顺序发 ...
- LeetCode169 求众数
题目链接:https://leetcode-cn.com/problems/majority-element/ 给定一个大小为 n 的数组,找到其中的众数.众数是指在数组中出现次数大于 ⌊ n/2 ⌋ ...
- mysql-5.7.17-winx64压缩版的安装包下载和安装配置
网上有很多的安装配置步骤,但是一个跟一个遇到的问题不一样,总之越是写的完整的人,遇到的错误越多,在安装过程中也就越悲催!第一步:下载mysql安装包---下载网址https://downloads.m ...
- Python云图——WordCloud了解一下
字符可以作画(参考前文:使用记事本画出照片) 字符串一样也可以 安装词云WordCloud. pip install wordcloud 编写要生成词云的内容字符串 保存为txt格式就可以了 使用Py ...
- mysql5.6 centos编译部署
准备工作 创建用户 useradd mysql 删除老版本 rpm -qa |grep mysql rep -e mysql包 重命名默认的mysql配置文件 mv /etc/my.cnf /etc/ ...