首页 > 代码库 > css绘图

css绘图

2024-09-11 16:49:29   236人阅读

1、正方形

#square {
    width: 100px;
    height: 100px;
    background: red;
}

 

2、长方形

#rectangle {
    width: 200px;
    height: 100px;
    background: red;
}

 

3、圆形

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

4、上三角

.triangle-up {
        width: 0;
        height: 0;        
        border: 50px solid ;
        border-color:transparent transparent red transparent;
    }

 

5、下三角

.triangle-down {
        width: 0;
        height: 0;        
        border: 50px solid;
        border-color:blue transparent transparent  transparent;}

6、左三角

.triangle-left {
        width: 0;
        height: 0;        
        border: 50px solid;
        border-color:transparent yellow  transparent  transparent;
    }

7、右三角

.triangle-right {
        width: 0;
        height: 0;        
        border: 50px solid;
        border-color:transparent transparent  transparent green;
    }

8.左上三角

    .riangle-topleft{
        width:0;
        height:0;
        border: 50px solid;
        border-color:red transparent transparent red;
    }

9、右上三角

    .riangle-topright{
        width:0;
        height:0;
        border: 50px solid;
        border-color:green green transparent transparent ;
    }

10、左下三角

.riangle-bottomleft{
        width:0;
        height:0;
        border: 50px solid;
        border-color: transparent transparent yellow yellow;
    }

11、 右下三角

   .riangle-bottomight{
        width:0;
        height:0;
        border: 50px solid;
        border-color: transparent blue blue  transparent ;
    }

12、平行四边形

.parallelogram{
        width:200px;
        height: 100px;
        background: red;
        -webkit-transform: skew(20deg);
           -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
        transform: skew(20deg);
    }

13、梯形

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

14、六角星

.star-six {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
        position: relative;
        margin: 10px auto;

    }
    .star-six: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;
    }

15、五角星

.star-five {
          margin: 50px 0;
        position: relative;
       color: red;
       width: 0;
       height: 0;
       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);
       margin: 100px auto;
    }
    .star-five: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;
       content: ‘‘;
       -webkit-transform: rotate(-35deg);
       -moz-transform:    rotate(-35deg);
       -ms-transform:     rotate(-35deg);
       -o-transform:      rotate(-35deg);
        
    }
    .star-five: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: ‘‘;
    }

16、五角大楼

.pentagon {
        position: relative;
        width: 54px;
        border-width: 50px 18px 0;
        border-style: solid;
        border-color: red transparent;
        margin: 10px auto;
    }
    .pentagon: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;

    }

17、六边形

.hexagon {
        width: 100px;
        height: 55px;
        position: relative;
        background: red;
        margin: 60px auto;
    }
    .hexagon: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;
    }
    .hexagon: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;
    }

18、八角形

.octagon {
        width: 100px;
        height: 100px;
        background:red;
        position: relative;
        margin: 60px auto;
    }
      
    .octagon: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;
    }
      
    .octagon: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;
    }

19、心形

.heart {
        position: relative;
        width: 100px;
        height: 90px;
        margin: 60px auto;
    }
    .heart:before,
    .heart: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%;
    }
    .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%;
    }

20、提示对话框

.talkbubble {
       width: 120px; 
       height: 60px;
       position: relative;
       -moz-border-radius:    10px; 
       -webkit-border-radius: 10px; 
       border-radius: 10px;
       background: red;
        margin: 60px auto;
    }
    .talkbubble:before {
       content:"";
       width: 0;
       height: 0;
/*       border:14px solid;
       border-color:transparent red transparent transparent ;*/
       border-top: 14px solid transparent;
      border-right: 20px solid red;
      border-bottom: 14px solid transparent;
       position: absolute;
       left:-14px;
       top:14px;
    }

 

css绘图


联系
我们