不规则的圆角制作 BY john

像我们一般都是用border-radius去做正常的圆角类型，然后UI设计师会设计出不同的圆角。

例如：

这样子的圆角，会不会让你抓狂，你会叫UI切图，但是你不知道后台给的数据多少啊，所以切图不可行啊。

今天教大家怎么制作这种圆角咯！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>不规则圆角</title>
    <style type="text/css">
        .wrap {
            position: relative;
            width: 100px;
            height: 100px;
            border: 1px solid pink;
        }
        .left-top,.right-top,.left-bottom,.right-bottom {
            position:absolute;
            width: 20px;
            height: 20px;
            border: 1px solid #fff;
            z-index:1;
        }
        .left-top {
            top: -1px;
            left: -1px;
            border-radius: 0 0 20px 0;
            border-bottom: 1px solid red;
            border-right: 1px solid red;
        }
         .right-top {
            top: -1px;
            right: -1px;
            border-radius: 0 0 0 20px;
            border-bottom: 1px solid red;
            border-left: 1px solid red;
        }
        .left-bottom {
            bottom: -1px;
            left: -1px;
            border-radius: 0 20px 0 0;
            border-top: 1px solid red;
            border-right: 1px solid red;
        }
        .right-bottom {
            bottom: -1px;
            right: -1px;
            border-radius: 20px 0 0 0;
            border-top: 1px solid red;
            border-left: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left-top"></div>
        <div class="right-top"></div>
        <div class="left-bottom"></div>
        <div class="right-bottom"></div>
    </div>
</body>
</html>

你们可以研究下咯，小编总结下几点注意点：一：绝对定位的位置是那边你就按照正常上右下左去看咯 二：border-radius:也是按照上右下左方向去看的  三：绝对定位的 盒子border:方向  你得注意咯，top/bottom按他的定位方向一样  但是left/right border相反方向。

写的不好 大家多多支持哈 ！

posted @ 2017-12-25 16:56  123海波  阅读(376)  评论(0)    收藏  举报