CSS绘制简单图形

CSS绘制简单图形

※ 本文主要总结基本图形的绘制

（一）圆形类

    

        .circle{
            border-radius:50%;
            width:100px;
            height:100px;
        }
        .hole{
            border-radius:50%;
            width:50px;
            height:50px;
            border:25px solid Tomato;
            background-color: transparent;
        }
        .ellipse{
            border-radius:50%;
            width:200px;
            height:100px;
        }
        .capsule{
            border-radius:50px; /*容器高度的一半*/
            width:200px;
            height:100px;
        }

    <div class="circle" title="圆形"></div>
    <div class="hole" title="空心圆"></div>
    <div class="ellipse" title="椭圆"></div>
    <div class="capsule" title="胶囊"></div>

（二）多边形类

     

        .deta_1{/* 利用边框，width与height值都为0 */
            width:0;
            height:0;
            border-width:50px;
            border-color:transparent transparent Tomato transparent;
            border-style:solid;
            background-color: transparent;
        }
        .deta_2{/* 利用CSS3渐变色（注意兼容性）*/
            width:100px;
            height:100px;
            background-color: transparent;
            background:-moz-linear-gradient(left bottom,Tomato 70px,transparent 70px);
        }
        .trapezoid_1{/* 利用边框，width与height有值 */
            width:50px;
            height:50px;
            border-width:50px;
            border-color:transparent transparent Tomato transparent;
            border-style:solid;
            background-color: transparent;
        }
        .trapezoid_2_wrap{
            perspective:300px;
            perspective-origin:center;
            background-color: transparent;
        }
        .trapezoid_2{
            width:150px;
            height:100px;
            transform:rotate3d(1,0,0,30deg);
            transform-origin:center;
            transform-style:preserve-3d;
            border-radius:20px 20px 0 0 ;
        }
        .rectangle_wrap{
            width:150px;
            overflow:hidden;
           /* display:block; */
        }
        .rectangle{
            margin:50%;
            /* display:block; */
        }

    <div class="deta_1" title="三角形"></div>
    <div class="deta_2" title="三角形"></div>
    <div class="trapezoid_1" title="梯形"></div>
    <div class="trapezoid_2_wrap"><div class="trapezoid_2" title="梯形"></div></div>
    <div class="rectangle_wrap">
        <div class="rectangle" title="2:1矩形"></div>
    </div>

（三）其他图形

   

        .heart{
            width:100px;
            height:100px;
            position:relative;
            margin-top:80px;
            margin-left:40px;
            transform:rotateZ(45deg);
        }
        .heart:before,.heart:after{
            content:" ";
            position:absolute;
            width:100px;
            height:100px;
            background-color: Tomato;
            border-radius:50%;
        }
        .heart:before{
            top:-50px;
        }
        .heart:after{
            left:-50px;
        }

    <div class="heart" title="心形"></div>

        .grid{
            width:100px;
            height: 100px;
            background-image: linear-gradient(45deg,tomato 25%,transparent 25%),
                              linear-gradient(-45deg,tomato 25%,transparent 25%),
                              linear-gradient(45deg,transparent 75%,tomato 25%),
                              linear-gradient(-45deg,transparent 75%,tomato 25%);
        }
        .grids{
            width:270px;
            height:150px;
            background-image: linear-gradient(45deg,tomato 25%,transparent 25%),
                              linear-gradient(-45deg,tomato 25%,transparent 25%),
                              linear-gradient(45deg,transparent 75%,tomato 25%),
                              linear-gradient(-45deg,transparent 75%,tomato 25%);
            background-size: 30px 30px;
        }

 <div class="grid" title="格子"></div>
    <div class="grids" title="格子背景"></div>