zoukankan      html  css  js  c++  java
  • CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

    CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等等

    新出的html5新增了不少标签,性能更强,原来的很繁琐的功能几个标签就能实现,同时CSS3也推出,更是一大亮点,下面是css3的部分用法,在此总结一下,以供需要的朋友们,总共30个例子

    1.长方形

    #Rectangle{

    200px;
    height: 50px;

    color: white;
    text-align: center;

    }

    2.正方形

    #square{
    200px;
    height: 200px;

    color: white;
    text-align: center;
    }

    3.实心圆

    #perfect-circle{
    200px;
    height: 200px;

    color: white;
    text-align: center;
    border-radius: 100px;
    /*-webkit-border-radius: 100px;*/
    -moz-border-radius: 100px;
    }

    4.圈

    #circle{
    200px;
    height: 200px;

    color: black;
    text-align: center;
    border-radius: 100px;
    /*-webkit-border-radius: 10px;*/
    /*-moz-border-radius: 100px;*/
    border:3px red solid;
    }

    5.椭圆

    #ellipse{
    200px;
    height: 100px;

    color: white;
    text-align: center;
    border-radius: 100px/50px;
    /*-webkit-border-radius: 100px/50px;*/
    /*-moz-border-radius: 100px/50px;*/
    }

    6.上三角

    #triangle-up{
    0px;
    height: 0px;
    color: white;
    text-align: center;
    border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    /*-webkit-border-top-left-radius: 50px solid transparent;*/
    /*-webkit-border-top-right-radius: 50px solid transparent;*/
    /*-webkit-border-bottom-left-radius: 100px solid red;*/
    /*-webkit-border-bottom-right-radius: 100px solid red;*/
    }

    7.下三角

    #triangle-down{
    0px;
    height: 0px;
    color: white;
    text-align: center;
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    }

    8.左三角

    #triangle-left{
    0px;
    height: 0px;
    color: white;
    text-align: center;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
    }

    9.右三角

    #triangle-right{
    0px;
    height: 0px;
    color: white;
    text-align: center;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
    }

    10.顶左

    #triangle-topleft{
    0px;
    height: 0px;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
    }

    11.顶右

    #triangle-topright{
    0px;
    height: 0px;
    border-top: 100 solid red;
    border-left: 100 solid transparent;
    }

    12.底左

    #triangle-bottomleft{
    0px;
    height: 0px;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
    }

    13.底右

    #triangle-bottomright{
    0px;
    height: 0px;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
    }

    14.平行四边形

    #parallelogram{
    200px;
    height: 150px;
    margin-left: 30px;
    -webkit-transform: skew(-30deg);
    -moz-transform: skew(200deg);
    -o-transform: skew(200deg);

    }

    15.

    #trapezoid{
    border-bottom: 100px solid red; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    100px;
    height: 0px;

    }


    16. #star-five{
    0;
    height: 0;
    color: red;
    margin: 50px 0;
    position: relative;
    display: block;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 70px solid red;
    -moz-transfrom:rotate(35deg);
    -webkit-transform:rotate(35deg);
    -ms-transform:rotate(35deg);
    -o-transform:rotate(35deg);
    }


    #star-five:before{
    0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 80px solid red;
    position: absolute;
    top: -45px;
    left: -65px;
    color: white;
    display: block;
    content: "";
    -moz-transform:rotate(-35deg);
    -webkit-transform:rotate(-35deg);
    -ms-transform:rotate(-35deg);
    -o-transform:rotate(-35deg); 
    }
    #star-five:after{
    0;
    height: 0;
    display: block;
    position: absolute;
    color: red;
    top: 3px;
    left: -105px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 70px solid red;
    content: "";
    -moz-transform:rotate(-70deg);
    -webkit-transform:rotate(-70deg);
    -ms-transform:rotate(-70deg);
    -o-transform:rotate(-70deg);
    }


    17. #star-six{
    0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
    }
    #star-six:after{
    0;
    height: 0;
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
    }


    18. #pentagon{
    54px;
    position: relative;
    border- 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
    }
    #pentagon:before{
    content: "";
    position: absolute;
    0;
    height: 0;
    top: -85px;
    left: -18px;
    border- 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
    }


    19. #hexagon{
    100px;
    height: 55px;

    position: relative;
    }
    #hexagon:before{
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    0;
    height: ;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
    }
    #hexagon:after{
    content: "";
    left: 0;
    0;
    height: 0;
    bottom: -25px;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
    }


    20. #octagon{
    100px;
    height: 100px;

    position: relative;
    }
    #octagon:before{
    42px;
    height: 0;
    top: 0;
    left: 0;
    position: absolute;
    content: "";
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    border-bottom: 29px solid red;
    }
    #octagon:after{
    42px;
    height: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    content: "";
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    border-top: 29px solid red;
    }


    21 #heart{
    100px;
    height: 90px;
    position: relative;
    }
    #heart:before,#heart:after{
    50px;
    height: 80px;
    left: 50px;
    top: 0;

    position: absolute;
    content: "";
    -moz-border-radius:50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
    -webkit-transform-origin:0 100%;
    -ms-transform-origin:0 100%;
    -moz-transform-origin:0 100%;
    -o-transform-origin:0 100%;
    tansform-origin:0 100%;
    }
    #heart:after{
    left: 0;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    -webkit-transform-origin:100% 100%;
    -ms-transform-origin:100% 100%;
    -moz-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
    transform-origin:100% 100%;
    }


    22. #infinity{
    212px;
    height: 100px;
    position: relative;
    }
    #infinity:before,#infinity:after{
    60px;
    height: 60px;
    top: 0;
    left: 0;
    border: 20px solid red;
    position: absolute;
    content: "";
    border-radius: 50px 50px 0 50px;
    -webkit-border-radius:50px 50px 0 50px;
    -moz-border-radius:50px 50px 0 50px;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    }
    #infinity:after{
    left: auto;
    right: 0;
    border-radius: 50px 50px 50px 0;
    -webkit-border-radius:50px 50px 50px 0;
    -moz-border-radius:50px 50px 50px 0;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    }

    23. #egg{
    126px;
    height: 180px;

    display: block;
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
    /*-webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;*/
    }


    24. #pacman{
    0;
    height: 0;
    border-right: 60px solid transparent;
    border-left: 60px solid red;
    border-top: 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;
    }


    25. #talkbubble{
    200px;
    height: 100px;

    position: relative;
    border-radius: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    }
    #talkbubble:before{
    0;
    height: 0;
    right: 100%;
    top: 30px;
    position: absolute;
    content: "";
    border-top: 15px solid transparent;
    border-right: 30px solid red;
    border-bottom: 15px solid transparent;
    }


    26. #burst-12{
    80px;
    height: 80px;

    position: relative;
    text-align: center;
    }
    #burst-12:before,#burst-12:after{
    80px;
    height: 80px;
    top: 0;
    left: 0;

    position: absolute;
    content: "";
    }
    #burst-12:before{
    transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    -o-transform:rotate(30deg);
    }
    #burst-12:after{
    transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    -moz-transform:rotate(60deg);
    -o-transform:rotate(60deg);
    }


    27. #burst-8{
    80px;
    height: 80px;

    text-align: center;
    position: relative;
    transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
    -ms-transform:rotate(20deg);
    -moz-transform:rotate(20deg);
    -o-transform:rotate(20deg);
    }
    #burst-8:before{
    80px;
    height: 80px;
    top: 0;
    left: 0;

    position: absolute;
    content: "";
    transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    -ms-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    -o-transform:rotate(135deg);
    }


    29. #diamond{
    50px;
    height: 0;
    border-style: solid;
    border-color: transparent transparent red transparent;
    border- 0 25px 25px 25px;
    position: relative;
    margin: 20px 0 50px 0;
    }
    #diamond:after{
    0;
    height: 0;
    top: 25px;
    left: -25px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border- 70px 50px 0 50px;
    position: absolute;
    content: "";
    }


    30. #yin-yang{
    96px; 
    height: 48px; 
     
    border-color: red; 
    border-style: solid; 
    border- 2px 2px 50px 2px; 
    border-radius: 100%; 
    position: relative; 
    }
    #yin-yang:before {
    12px; 
    height: 12px;
    top: 50%; 
    left: 0; 
    content: ""; 
    position: absolute; 
     
    border: 18px solid red; 
    border-radius: 100%; 

    #yin-yang:after {
    12px; 
    height: 12px;
    top: 50%; 
    left: 50%;

    border: 18px solid #fff; 
    border-radius:100%; 
    content: ""; 
    position: absolute; 

    至此30个例子到此结束,不足之处还请大神多多指正,共同学习进步。谢谢。。。

  • 相关阅读:
    LeetCode 230. Kth Smallest Element in a BST
    LeetCode 114. Flatten Binary Tree to Linked List
    LeetCode 222. Count Complete Tree Nodes
    LeetCode 129. Sum Root to Leaf Numbers
    LeetCode 113. Path Sum II
    LeetCode 257. Binary Tree Paths
    Java Convert String & Int
    Java Annotations
    LeetCode 236. Lowest Common Ancestor of a Binary Tree
    LeetCode 235. Lowest Common Ancestor of a Binary Search Tree
  • 原文地址:https://www.cnblogs.com/nifengs/p/5287850.html
Copyright © 2011-2022 走看看