css绘制各种形状

效果：http://sandbox.runjs.cn/show/9lyjtbxl
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style type="text/css">
    div{
        margin:20px auto;
    }
    .div1{
        border-top:100px solid #f00;
        border-right:100px solid transparent;
        width:0;
        height:0;
    }
    .div2{
        width: 200px; 
        height: 100px; 
        background: red; 
        -moz-border-radius: 100px / 50px; 
        -webkit-border-radius: 100px / 50px; 
        border-radius: 100px / 50px; 
    }
    .div3{ 
        width: 0; 
        height: 0; 
        border-left: 50px solid transparent; 
        border-right: 50px solid transparent; 
        border-bottom: 100px solid red; 
    } 
    .div4 { 
        width: 0; 
        height: 0; 
        border-left: 50px solid transparent; 
        border-right: 50px solid transparent; 
        border-top: 100px solid red; 
    } 
    .div5 { 
    width: 0; 
    height: 0; 
    border-top: 100px solid red; 
    border-left: 100px solid transparent; 
    } 
    .div6 { 
    width: 0; 
    height: 0; 
    border-bottom: 100px solid red; 
    border-right: 100px solid transparent; 
    } 
    .div7 { 
    width: 0; 
    height: 0; 
    border-bottom: 100px solid red; 
    border-left: 100px solid transparent; 
    } 
    .div8 { 
    width: 150px; 
    height: 100px; 
    margin-left:20px; 
    -webkit-transform: skew(20deg); 
    -moz-transform: skew(20deg); 
    -o-transform: skew(20deg); 
    background: red; 
    } 
    .div9 { 
    border-bottom: 100px solid red; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 100px; 
    } 
    .div10 { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid red; 
    position: relative; 
    } 
    .div10:after { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 100px solid red; 
    position: absolute; 
    content: ""; 
    top: 30px; 
    left: -50px; 
    } 
    .div11 { 
    margin: 50px 0; 
    position: relative; 
    display: block; 
    color: red; 
    width: 0px; 
    height: 0px; 
    border-right: 100px solid transparent; 
    border-bottom: 70px solid red; 
    border-left: 100px solid transparent; 
    -moz-transform: rotate(35deg); 
    -webkit-transform: rotate(35deg); 
    -ms-transform: rotate(35deg); 
    -o-transform: rotate(35deg); 
    } 
    .div11:before { 
    border-bottom: 80px solid red; 
    border-left: 30px solid transparent; 
    border-right: 30px solid transparent; 
    position: absolute; 
    height: 0; 
    width: 0; 
    top: -45px; 
    left: -65px; 
    display: block; 
    content: ''; 
    -webkit-transform: rotate(-35deg); 
    -moz-transform: rotate(-35deg); 
    -ms-transform: rotate(-35deg); 
    -o-transform: rotate(-35deg); 
    } 
    .div11:after { 
    position: absolute; 
    display: block; 
    color: red; 
    top: 3px; 
    left: -105px; 
    width: 0px; 
    height: 0px; 
    border-right: 100px solid transparent; 
    border-bottom: 70px solid red; 
    border-left: 100px solid transparent; 
    -webkit-transform: rotate(-70deg); 
    -moz-transform: rotate(-70deg); 
    -ms-transform: rotate(-70deg); 
    -o-transform: rotate(-70deg); 
    content: ''; 
    } 
    .div12 { 
    position: relative; 
    width: 54px; 
    border-width: 50px 18px 0; 
    border-style: solid; 
    border-color: red transparent; 
    } 
    .div12:before { 
    content: ""; 
    position: absolute; 
    height: 0; 
    width: 0; 
    top: -85px; 
    left: -18px; 
    border-width: 0 45px 35px; 
    border-style: solid; 
    border-color: transparent transparent red; 
    } 
    .div13 { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative; 
    } 
    .div13:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 25px solid red; 
    } 
    .div13:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 25px solid red; 
    } 
    .div14 { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position: relative; 
    } 
    .div14:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-bottom: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 
    } 
    .div14:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    border-top: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 
    } 
    .dvi15 { 
    position: relative; 
    width: 100px; 
    height: 90px; 
    } 
    .dvi15:before, 
    .dvi15:after { 
    position: absolute; 
    content: ""; 
    left: 50px; 
    top: 0; 
    width: 50px; 
    height: 80px; 
    background: red; 
    -moz-border-radius: 50px 50px 0 0; 
    border-radius: 50px 50px 0 0; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
    } 
    .dvi15:after { 
    left: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    -ms-transform-origin: 100% 100%; 
    -o-transform-origin: 100% 100%; 
    transform-origin :100% 100%; 
    } 
    .dvi16 { 
    position: relative; 
    width: 212px; 
    height: 100px; 
    } 
    .dvi16:before, 
    .dvi16:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 60px; 
    height: 60px; 
    border: 20px solid red; 
    -moz-border-radius: 50px 50px 0 50px; 
    border-radius: 50px 50px 0 50px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    } 
    .dvi16:after { 
    left: auto; 
    right: 0; 
    -moz-border-radius: 50px 50px 50px 0; 
    border-radius: 50px 50px 50px 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    } 
    .div17 { 
    display:block; 
    width: 126px; 
    height: 180px; 
    background-color: red; 
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; 
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 
    } 
    .div18 { 
    width: 0px; 
    height: 0px; 
    border-right: 60px solid transparent; 
    border-top: 60px solid red; 
    border-left: 60px solid red; 
    border-bottom: 60px solid red; 
    border-top-left-radius: 60px; 
    border-top-right-radius: 60px; 
    border-bottom-left-radius: 60px; 
    border-bottom-right-radius: 60px; 
    } 
    .div19 { 
    width: 120px; 
    height: 80px; 
    background: red; 
    position: relative; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    } 
    .div19:before { 
    content:""; 
    position: absolute; 
    right: 100%; 
    top: 26px; 
    width: 0; 
    height: 0; 
    border-top: 13px solid transparent; 
    border-right: 26px solid red; 
    border-bottom: 13px solid transparent; 
    } 
    .div20 { 
    background: red; 
    width: 80px; 
    height: 80px; 
    position: relative; 
    text-align: center; 
    } 
    .div20:before, .div20:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 80px; 
    width: 80px; 
    background: red; 
    } 
    .div20:before { 
    -webkit-transform: rotate(30deg); 
    -moz-transform: rotate(30deg); 
    -ms-transform: rotate(30deg); 
    -o-transform: rotate(30deg); 
    transform: rotate(30deg); 
    } 
    .div20:after { 
    -webkit-transform: rotate(60deg); 
    -moz-transform: rotate(60deg); 
    -ms-transform: rotate(60deg); 
    -o-transform: rotate(60deg); 
    transform: rotate(60deg); 
    }
    .div21 { 
    background: red; 
    width: 80px; 
    height: 80px; 
    position: relative; 
    text-align: center; 
    -webkit-transform: rotate(20deg); 
    -moz-transform: rotate(20deg); 
    -ms-transform: rotate(20deg); 
    -o-transform: rotate(20eg); 
    transform: rotate(20deg); 
    } 
    .div21:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 80px; 
    width: 80px; 
    background: red; 
    -webkit-transform: rotate(135deg); 
    -moz-transform: rotate(135deg); 
    -ms-transform: rotate(135deg); 
    -o-transform: rotate(135deg); 
    transform: rotate(135deg); 
    } 
    .div22 { 
    border-style: solid; 
    border-color: transparent transparent red transparent; 
    border-width: 0 25px 25px 25px; 
    height: 0; 
    width: 50px; 
    position: relative; 
    margin: 20px 0 50px 0; 
    } 
    .div22:after { 
    content: ""; 
    position: absolute; 
    top: 25px; 
    left: -25px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-color: red transparent transparent transparent; 
    border-width: 70px 50px 0 50px; 
    }
    .div23 { 
    width: 96px; 
    height: 48px; 
    background: #eee; 
    border-color: red; 
    border-style: solid; 
    border-width: 2px 2px 50px 2px; 
    border-radius: 100%; 
    position: relative; 
    } 
    .div23:before { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    background: #eee; 
    border: 18px solid red; 
    border-radius: 100%; 
    width: 12px; 
    height: 12px; 
    } 
    .div23:after { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    background: red; 
    border: 18px solid #eee; 
    border-radius:100%; 
    width: 12px; 
    height: 12px; 
    }  
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
    <div class="div7"></div>
    <div class="div8"></div>
    <div class="div9"></div>
    <div class="div10"></div>
    <div class="div11"></div>
    <div class="div12"></div>
    <div class="div13"></div>
    <div class="div14"></div>
    <div class="div15"></div>
    <div class="div16"></div>
    <div class="div17"></div>
    <div class="div18"></div>
    <div class="div19"></div>
    <div class="div20"></div>
    <div class="div21"></div>
    <div class="div22"></div>
    <div class="div23"></div>
</body>
</html>
posted @ 2016-04-04 15:21 黑客PK 阅读(253) 评论(0) 编辑收藏举报
会员力量，点亮园子希望
刷新页面返回顶部
黑客

css绘制各种形状

公告
