zoukankan      html  css  js  c++  java
  • css画常用图形

    1.圆形、上半圆

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

    .circle {

         120px;

        height: 120px;

        background: #7fee1d;

        -moz-border-radius: 60px;

        -webkit-border-radius: 60px;

        border-radius: 60px;

    }

     

     

    .semi-circle{ height:50px;/*是width的一半*/

    100px;

    background:#9da;

    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ 

    }

    2.椭圆形

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

    .oval {

         200px;

        height: 100px;

        background: #e9337c;

        -webkit-border-radius: 100px / 50px;

        -moz-border-radius: 100px / 50px;

        border-radius: 100px / 50px;

    }

    3.三角形

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

      3.1up

     .triangle {

         0;

        height: 0;

        border-bottom: 140px solid #fcf921;

        border-left: 70px solid transparent;

        border-right: 70px solid transparent;

      }  

    3.2 down

    与正三角形不同的是,倒三角形要设置的是border-top、border-left和border-right三条边的属性:

    .triangle {

         0;

        height: 0;

        border-top: 140px solid #20a3bf;

        border-left: 70px solid transparent;

        border-right: 70px solid transparent;

    }

     3.3left

    制作左三角形:

    左三角形操作的是border-top、border-right和border-right三条边的属性,其中上边和下边要设置透明属性。

    .triangle_left {

         0;

        height: 0;

        border-top: 70px solid transparent;

        border-right: 140px solid #6bbf20;

        border-bottom: 70px solid transparent;

    }  

    3.4right

    制作右三角形:

    左三角形操作的是border-top、border-left和border-right三条边的属性,其中上边和下边要设置透明属性。

    .triangle_left {

         0;

        height: 0;

        border-top: 70px solid transparent;

        border-left: 140px solid #6bbf20;

        border-bottom: 70px solid transparent;


    4.制作菱形

    制作菱形的方法有很多种。这里使用的是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;

    5.制作梯形:

    梯形是三角形的一个变体,设置CSS梯形时,左右两条边设置为相等,并且给它设置一个宽度。

    #trapezium {

        height: 0;

         120px;

        border-bottom: 120px solid #ec3504;

        border-left: 60px solid transparent;

        border-right: 60px solid transparent;

    6.制作平行四边形:

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

    #parallelogram {

         160px;

        height: 100px;

        background: #8734f7;

        -webkit-transform: skew(30deg);

        -moz-transform: skew(30deg);

        -o-transform: skew(30deg);

        transform: skew(30deg);

    }  


     

     

  • 相关阅读:
    【郑轻邀请赛 G】密室逃脱
    【郑轻邀请赛 C】DOBRI
    【郑轻邀请赛 F】 Tmk吃汤饭
    【郑轻邀请赛 I】这里是天堂!
    【郑轻邀请赛 B】base64解密
    【郑轻邀请赛 A】tmk射气球
    【郑轻邀请赛 H】 维克兹的进制转换
    解决adb command not found以及sdk环境配置
    adb shell 命令详解,android, adb logcat
    Unexpected exception 'Cannot run program ... error=2, No such file or directory' ... adb'
  • 原文地址:https://www.cnblogs.com/WhatTTEver/p/6867860.html
Copyright © 2011-2022 走看看