Saturday, May 26, 2012 Figures CSS

Today, technology allows you to create CSS more flexible things. CSS3 has successfully replaces the use of graphics in the design of pages, greatly simplifying and easing the code a web page. Today, with CSS you can create not only a realistic gradients, drop shadows, etc. but also to create different shapes. Most of the following codes are used the possibility of CSS3, so will work on the latest browsers. A distinctive feature of the establishment of such figures is the fact that you use only one tag of HTML. Appointing him to this or that class, you can easily switch the shape created by the shape.

Square

Source code:

# square  {
        width : 100px ;
        height : 100px ;
        Background : Red ;
}

Rectangle

Source code:

# Rectangle {
        width : 200px ;
        height : 100px ;
        Background : Red ;
}

Range

Source code:

# Circle  {
        width : 100px ;
        height : 100px ;
        Background : Red ;
        -Moz-border-radius: 50px ;
        -Webkit-border-radius: 50px ;
        border-radius: 50px ;
}

Oval

Source code:

# Oval {

        width : 200px ;
        height : 100px ;
        Background : Red ;
        -Moz-border-radius: 100px  / 50px ;
        -Webkit-border-radius: 100px  / 50px ;
        border-radius: 100px  / 50px ;
}

Triangle up

Source code:

# Triangle-up {
        width : 0 ;
        height : 0 ;
        border-left : 50px  Solid  transparent ;
        border-right : 50px  Solid  transparent ;
        border-bottom : 100px  Solid  Red ;
}

The star (6 end)

Source code:

# Star-six {
        width : 0 ;
        height : 0 ;
        border-left : 50px  Solid  transparent ;
        border-right : 50px  Solid  transparent ;
        border-bottom : 100px  Solid  Red ;
        position : relative ;
}
# 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- ;
}

Trapezoid

Source code:

# Trapezoid {
        border-bottom : 100px  Solid  Red ;
        border-left : 50px  Solid  transparent ;
        border-right : 50px  Solid  transparent ;
        height : 0 ;
        width : 100px ;
}

Parallelogram

Source code:

# Parallelogram {
        width : 150px ;
        height : 100px ;
        -Webkit-transform: skew ( 20 deg);
           -Moz-transform: skew ( 20 deg);
             -O-transform: skew ( 20 deg);
        Background : Red ;
}

The triangle down to the right

Source code:

# Triangle-bottomright {
        width : 0 ;
        height : 0 ;
        border-bottom : 100px  Solid  Red ;
        border-left : 100px  Solid  transparent ;
}

Triangle Down Left

Source code:

# Triangle-bottomleft {
        width : 0 ;
        height : 0 ;
        border-bottom : 100px  Solid  Red ;
        border-right : 100px  Solid  transparent ;
}

Triangle top right

Source code:

# Triangle-topright {
        width : 0 ;
        height : 0 ;
        border-top : 100px  Solid  Red ;
        border-left : 100px  Solid  transparent ;
}

Triangle top left

Source code:

# Triangle-topleft {
        width : 0 ;
        height : 0 ;
        border-top : 100px  Solid  Red ;
        border-right : 100px  Solid  transparent ;
}

Right Triangle

Source code:

# Triangle- right  {
        width : 0 ;
        height : 0 ;
        border-top : 50px  Solid  transparent ;
        border-left : 100px  Solid  Red ;
        border-bottom : 50px  Solid  transparent ;
}

The triangle to the left

Source code:

# Triangle- left  {
        width : 0 ;
        height : 0 ;
        border-top : 50px  Solid  transparent ;
        border-right : 100px  Solid  Red ;
        border-bottom : 50px  Solid  transparent ;
}

The star (5 end)

Source code:

# Star-five {
   margin : 50px  0 ;
   position : relative ;
   display : block ;
   Color : Red ;
   width : 0px ;
   height : 0px ;
   border-right :   100px  Solid  transparent ;
   border-bottom : 70px   Solid  Red ;
   border-left :    100px  Solid  transparent ;
   -Moz-transform: rotate ( 35 deg);
   -Webkit-transform: rotate ( 35 deg);
   -Ms-transform: rotate ( 35 deg);
   -O-transform: rotate ( 35 deg);
}
# 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- ;
   display : block ;
   content : '' ;
   -Moz-transform: rotate ( -35 deg);
   -Webkit-transform: rotate ( -35 deg);
}
# 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 ;
   -Moz-transform: rotate ( -70 deg);
   -Webkit-transform: rotate ( -70 deg);
   content : '' ;
}

Pentagon

Source code:

# Pentagon {
    position : relative ;
    width : 54px ;
    border-width : 50px  18px  0 ;
    border-style : Solid ;
    border-Color : Red  transparent ;
}
# 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 ;
}

Read more >>