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);

    }  


     

     

  • 相关阅读:
    POJ3159 Candies —— 差分约束 spfa
    POJ1511 Invitation Cards —— 最短路spfa
    POJ1860 Currency Exchange —— spfa求正环
    POJ3259 Wormholes —— spfa求负环
    POJ3660 Cow Contest —— Floyd 传递闭包
    POJ3268 Silver Cow Party —— 最短路
    POJ1797 Heavy Transportation —— 最短路变形
    POJ2253 Frogger —— 最短路变形
    POJ1759 Garland —— 二分
    POJ3685 Matrix —— 二分
  • 原文地址:https://www.cnblogs.com/WhatTTEver/p/6867860.html
Copyright © 2011-2022 走看看