css从中挖去一个圆

始终居中：

            width: 300px;
            position: fixed;
/*在可视区域的上下左右居中*/
 top: calc(50vh - 200px); 
 left: calc(50vw - 150px);

二分之一圆的边：

            border: 1px solid #fff;
            position: absolute;
            width: 30px;
            height: 60px;
            border-width: 1px 0px 1px 1px;
            border-radius: 30px 0 0 30px;
            top: calc(50% - 30px);
            right: 0;

完整：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 Calc</title>
    <style type="text/css" media="screen">
        body{
            background-image: url('../js-test/1.jpg');background-repeat: no-repeat;
        }
        .square, .square > div { box-sizing: border-box; }
        .square {
            width: 300px;
            position: fixed;
            top: calc(50vh - 200px);
            left: calc(50vw - 150px);
            overflow: hidden;
        }
        .square > .s-top {
            border: 1px solid #fff;
            height: 170px;
            border-radius: 5px 5px 0 0;
            border-width: 1px 1px 0 1px;
        }
        .square > .s-middle {
            border-left: 1px solid #fff;
            height: 60px;
        }
        .square > .s-bottom {
            border: 1px solid #fff;
            height: 170px;
            border-radius: 0 0 5px 5px;
            border-width: 0px 1px 1px 1px;
        }

        .square > .s-half-circle {
            border: 1px solid #fff;
            position: absolute;
            width: 30px;
            height: 60px;
            border-width: 1px 0px 1px 1px;
            border-radius: 30px 0 0 30px;
            top: calc(50% - 30px);
            right: 0;
        }
        .square > .s-background {
            border: 360px solid rgba(255,255,255,0.3);
            position: absolute;
            width: 780px;
            height: 780px;
            border-radius: 50%;
            top: calc(50% - 390px);
            right: -390px;
        }
        .circle {
            width: 50px;
            height: 50px;
            border: 1px solid #fff;
            border-radius: 50%;
            position: absolute;
            top: calc(50% - 25px);
            left: calc(50% + 125px);
            background-color: rgba(255,255,255,.3);
            box-sizing: border-box;
        }

    </style>
</head>

<body>
<div class="square">
    <div class="s-top"></div>
    <div class="s-middle"></div>
    <div class="s-bottom"></div>
    <div class="s-half-circle"></div>
    <div class="s-background"></div>
</div>
<div class="circle"></div>
</body>
</html>

 

posted @ 2017-01-17 15:01  最爱小虾  阅读(818)  评论(0)  编辑  收藏  举报