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 ...

随机推荐

苹果审核被拒，解析奔溃日志.txt转crash文件
1. 桌面新建一个文件夹,用来存放crash相关的东西.取名crash 2.下载苹果官方邮件里给的后缀名为 .txt 的被拒附件(这三个txt格式文件为苹果返回的崩溃日志文件),把这三个文件放在刚新建 ...
usb_camera
GitHub的操作
一.查看自己的信息:git config --list 修改config文件:01.输入vim ~/.gitconfig(回车) 02.点击 i.o或a 进入编辑模式 03.修改所要修改的信息 04. ...
springMVC(五): 通过 HandlerMapping 获取 HandlerExecutionChain
请求具体过程一.HandlerMapping Interface to be implemented by objects that define a mapping between request ...
OCP-第三节课.md
一. dataguard stream 字节流技术: 二. 突然断电:触发实例恢复过程: 三. 宕机:赔钱四. Redis.MQ(消息中间件.队列管理器.缓存)(内存数据库) 五. IBM MQ ...
ubuntu12.04下编译Linux tina 2.1/android经验
用的是osboxes下的vdi. 编译Linux 1. 不能在root用户下操作 2. 执行 make kernel_menuconfig 报错,需要 apt-get install zlib1g z ...
Python类中的__init__() 和 self 的解析
原文地址https://www.cnblogs.com/ant-colonies/p/6718388.html 1.Python中self的含义 self,英文单词意思很明显,表示自己,本身. 此处有 ...
python操作wifi
python连接wifi需要使用pywifi包,可以用pip install pywifi安装 1.导入包 import pywifi,time #保存包中写义的常量 from pywifi impo ...
smartctl 检测磁盘信息
smartctl -i 指定设备 -d 指定设备类型,例如:ata, scsi, marvell, sat, 3ware,N -a 或A 显示所有信息 -l 指定日志的类型,例如:TYPE: err ...
Eclipse安装fatjar（不用自己下载fatjar包）
.安装Eclipse-jee-luna-SR2-win32-x86_64版本的插件支持方法如下: Help -> Install New Software... -> Work with ...

css绘制内扣圆角

css绘制内扣圆角的更多相关文章

随机推荐

热门专题