纯静态的一种效果绘制，避免使用图标浪费内存。效果如下
废话不多说，代码如下：
<!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>