zoukankan      html  css  js  c++  java
  • 使用CSS3制作各种形状

    CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性,像transform和border-radius,我们可以创建非常漂亮和复杂的图形效果。

    圆形

    圆形在设置CSS时要设置宽度和高度相等,然后设置border-radius属性为宽度或高度的一半即可

    #circle {
         120px;
        height: 120px;
        background: #7fee1d;
        -moz-border-radius: 60px;
        -webkit-border-radius: 60px;
        border-radius: 60px;
    }
    
    <div id="circle"></div>

    正方形

    正方形的CSS样式只需要设置相同的宽度和高度即可

    #square {
         120px;
        height: 120px;
        background: #f447ff;
    }
    
    <div id="square"></div>

    长方形

    与正方形不同的是,长方形的长度和高度为不同的值

    #rectangle {
         220px;
        height: 120px;
        background: #4da1f7;
    }
    
    <div id="rectangle"></div>

    椭圆形

    设置椭圆形的CSS时,高度要设置为宽度的一半,border-radius属性也要做相应的改变

    #oval {
         200px;
        height: 100px;
        background: #e9337c;
        -webkit-border-radius: 100px / 50px;
        -moz-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
    }
    
    <div id="oval"></div>

    三角形

    要创建一个CSS三角形,需要使用border,通过设置不同边的透明效果,我们可以制作出三角形的现状。另外,在制作三角形时,宽度和高度要设置为0

    #triangle {
         0;
        height: 0;
        border-bottom: 140px solid #fcf921;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
    }
    
    <div id="triangle"></div>

    倒三角 

    与正三角形不同的是,倒三角形要设置的是border-top、border-left和border-right三条边的属性。另外,在制作三角形时,宽度和高度要设置为0

    #triangle {
         0;
        height: 0;
        border-top: 140px solid #20a3bf;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
    }

    左三角

    #triangle {
         0;
        height: 0;
        border-top: 70px solid transparent;
        border-right: 140px solid #6bbf20;
        border-bottom: 70px solid transparent;
    }

    右三角

    #triangle {
         0;
        height: 0;
        border-top: 70px solid transparent;
        border-left: 140px solid #ff5a00;
        border-bottom: 70px solid transparent;
    }

    菱形

    制作菱形的方法有很多种。这里使用的是transform属性的rotate

    #diamond {
         120px;
        height: 120px;
        background: #1eff00;
      /* Rotate */
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
      /* Rotate Origin */
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
        margin: 60px 0 10px 310px;
    }
    
    <div id="diamond"></div>

    平行四边形

    平行四边形的制作方式是使用transform属性使长方形倾斜一个角度

    #parallelogram {
         160px;
        height: 100px;
        background: #8734f7;
        -webkit-transform: skew(30deg);
        -moz-transform: skew(30deg);
        -o-transform: skew(30deg);
        transform: skew(30deg);
    }
    
    <div id="parallelogram"></div>

    星形

    星形的实现方式比较复杂,主要是使用transform属性来旋转不同的边

    #star {
         0;
        height: 0;
        margin: 50px 0;
        color: #fc2e5a;
        position: relative;
        display: block;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #fc2e5a;
        border-left: 100px solid transparent;
        -moz-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
    }
      
    #star:before {
        height: 0;
         0;
        position: absolute;
        display: block;
        top: -45px;
        left: -65px;
        border-bottom: 80px solid #fc2e5a;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        content: '';
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
    }
      
    #star:after {
        content: '';
         0;
        height: 0;
        position: absolute;
        display: block;
        top: 3px;
        left: -105px;
        color: #fc2e5a;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #fc2e5a;
        border-left: 100px solid transparent;
        -webkit-transform: rotate(-70deg);
        -moz-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
    }
    
    <div id="star"></div>

    六角星形 

    和五角星的制作方法不同,六角星形状的制作方法是操纵border属性来制作两半图形,然后合并它们

    #star_six_points {
         0;
        height: 0;
        display: block;
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #de34f7;
        margin: 10px auto;
    }
      
    #star_six_points:after {
        content: "";
         0;
        height: 0;
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid #de34f7;
        margin: 30px 0 0 -50px;
    } 
    
    <div id="star_six_points"></div>

    五边形

    创建CSS五边形需要结合两个图形:一个梯形,然后在它的上面放一个三角形,共同组成一个五边形 

    #pentagon {
         54px;
        position: relative;
        border- 50px 18px 0;
        border-style: solid;
        border-color: #277bab transparent;
    }
      
    #pentagon:before {
        content: "";
        height: 0;
         0;
        position: absolute;
        top: -85px;
        left: -18px;
        border- 0 45px 35px;
        border-style: solid;
        border-color: transparent transparent #277bab;
    }
    
    <div id="pentagon"></div>

    六边形

    六边形的制作方法可以有很多种,可以像五边形一样,先制作一个长方形,然后在它的上面和下面各放置一个三角形 

    #hexagon {
         100px;
        height: 55px;
        background: #fc5e5e;
        position: relative;
        margin: 10px auto;
    }
      
    #hexagon:before {
        content: "";
         0;
        height: 0;
        position: absolute;
        top: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid #fc5e5e;
    }
      
    #hexagon:after {
        content: "";
         0;
        height: 0;
        position: absolute;
        bottom: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid #fc5e5e;
    }
    
    <div id="hexagon"></div>

    八角形

    #octagon {
         100px;
        height: 100px;
        background: #ac60ec;
        position: relative;
    }
      
    #octagon:before {
        content: "";
         42px;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 29px solid #ac60ec;
        border-left: 29px solid #f4f4f4;
        border-right: 29px solid #f4f4f4;
    }
      
    #octagon:after {
        content: "";
         42px;
        height: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 29px solid #ac60ec;
        border-left: 29px solid #f4f4f4;
        border-right: 29px solid #f4f4f4;
    }
    
    <div id="octagon"></div>

    心形

    心形的制作是非常复杂的,可以使用伪元素来制作,分别将伪元素旋转不同的角度,并修改transform-origin属性来元素的旋转中心点

    #heart {
        position: relative;
    }
      
    #heart:before,#heart:after {
        content: "";
         70px;
        height: 115px;
        position: absolute;
        background: red;
        left: 70px;
        top: 0;
        -webkit-border-radius: 50px 50px 0 0;
        -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%;
    }
      
    #heart: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%;
    }
    
    <div id="heart"></div>

    蛋形

    蛋形时椭圆形的一个变体,它的高度要比宽度稍大,并且设置正确的border-radius属性即可以制作出一个蛋形

    #egg {
         136px;
        height: 190px;
        background: #ffc000;
        display: block;
        -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }
    
    <div id="egg"></div>

    无穷符号

    无穷符号可以通过border属性和设置伪元素的角度来实现

    #infinity {
         220px;
        height: 100px;
        position: relative;
    }
      
    #infinity:before,#infinity:after {
        content: "";
         60px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        border: 20px solid #06c999;
        -moz-border-radius: 50px 50px 0;
        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);
    }
      
    #infinity: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);
    }

    <div id="infinity"></div>

    消息框

    消息提示框可以先制作一个圆角矩形,然后在需要的地方放置一个三角形

    #comment_bubble {
         140px;
        height: 100px;
        background: #088cb7;
        position: relative;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 12px;
    }
      
    #comment_bubble:before {
        content: "";
         0;
        height: 0;
        right: 100%;
        top: 38px;
        position: absolute;
        border-top: 13px solid transparent;
        border-right: 26px solid #088cb7;
        border-bottom: 13px solid transparent;
    }

    <div id="comment_bubble></div>

    吃豆人

    吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形

    #pacman {
         0;
        height: 0;
        border-right: 70px solid transparent;
        border-top: 70px solid #ffde00;
        border-left: 70px solid #ffde00;
        border-bottom: 70px solid #ffde00;
        border-top-left-radius: 70px;
        border-top-right-radius: 70px;
        border-bottom-left-radius: 70px;
        border-bottom-right-radius: 70px;
    }
    
    <div id="pacman"></div>

     

  • 相关阅读:
    401. Binary Watch
    46. Permutations
    61. Rotate List
    142. Linked List Cycle II
    86. Partition List
    234. Palindrome Linked List
    19. Remove Nth Node From End of List
    141. Linked List Cycle
    524. Longest Word in Dictionary through Deleting
    android ListView详解
  • 原文地址:https://www.cnblogs.com/xiaobaizhiqian/p/8338308.html
Copyright © 2011-2022 走看看