Graphic drawing of CSS3

Because of the recent project in the appearance of irregular borders and graphics, so re-review the CSS3 drawing ... A style drawing is better than a picture's performance, the experience is better, the key point is more interesting!

The following examples are mainly used in CSS3 border, Bordr-radius, transform, pseudo-elements and other properties to complete, we first understand their basic principles.

border: In a nutshell, the border syntax mainly consists of three attributes (Border-width, Border-style, Border-color).

• • ? Border-top (top border): Border-width Border-style Border-color
  • ? Border-right (right border): Border-width Border-style Border-color
  • ? Border-bottom (Bottom border): Border-width Border-style Border-color
  • ? Border-left (left border): Border-width Border-style Border-color

Border-radius:Border-radius's syntax is much more flexible than we thought. You may be surprised to find that Border-radius was originally a shorthand attribute. Each of the expanded properties that it corresponds to:

• • ? Border-top-left-radius (upper left corner radius)
  • ? Border-top-right-radius (upper right corner radius)
  • ? Border-bottom-right-radius (lower right corner radius)
  • ? Border-bottom-left-radius (lower left corner radius)

border-image: There are three properties, namely, Picture (Border-image-source), clipping position (border-image-slice), repetition (border-image-repeat).

Images: Calling using URLs

Trim Location: Total 1~4 parameters, no units (default is pixels), can also be used as a percentage

• • First parameter A: clipping from the upper corresponding length
  • Second parameter B: Crop from the right length
  • Third parameter C: clipping from the corresponding length below
  • Fourth parameter D: clipping from the corresponding length on the left

Repeatability: There are three parameters stretch (default), Round,repeat

• • The default value is stretch, stretching the meaning, you can see in the above, "2" is vertical stretching, ">" is horizontal stretching, and the middle of the grid is horizontal vertical stretching together.
  • Round is tiled
  • Repeat is repeated

Words don't say much, come to see the effect directly:

1, Triangle series (triangle, inverted triangle, sazo angle, right triangle, upper left triangle, right upper triangle, left lower triangle, right lower triangle)

The main use is: The width height is set to 0, the border of each side of the set (transparent or opaque on each side);

 . triangle-up {/* triangles */width:0;height:0;border-left:50px solid transparent;                border-right:50px solid Transparent; border-bottom:100px solid #f00;}.            Triangle-down {/* Inverted triangular */width:0;height:0;border-left:50px solid transparent;                border-right:50px solid Transparent; border-top:100px solid #f00;}.            Triangle-left {/* Left triangle */width:0;height:0;border-top:50px solid transparent;                border-bottom:50px solid Transparent; border-right:100px solid #f00;}.            Triangle-right {/* Right triangle */width:0;height:0;border-top:50px solid transparent;                border-bottom:50px solid Transparent; border-left:100px solid #f00;}.            Triangle-topleft {//* left upper triangle */width:0;height:0;                border-right:100px solid Transparent; border-top:100px solid #f00;}.                Triangle-topright {/* Right upper triangle */width:0;height:0;border-left:100px solid transparent; border-top:100px solid #f00;}. Triangle-downleft {/* left lower triangle */width:0;height:0;                border-right:100px solid Transparent; border-bottom:100px solid #f00;}.                Triangle-downright {/* Right lower triangle */width:0;height:0;border-left:100px solid transparent; border-bottom:100px solid #f00;}

2, Trapezoid (variant of the triangle, set the left and right two edges equal, and set it a width)

       . trapezium {                    height:0;                    width:100px;                    border-bottom:100px solid #dc2500;                    border-left:50px solid transparent;                    border-right:50px solid transparent;                  }

　　

2, Love (heart-shaped production is very complex, you can use pseudo-elements to make, respectively, the pseudo-element rotation of different angles, and modify the Transform-origin attribute to the rotation of the elements of the center point)

                . Love {/* loving */position:relative;}. Love:before {content: ""; Width:70px;height:110px;background: #f00;p osition:absolute;border-top-left-radius:50%; Border-top-right-radius:50%;transform:rotate (45deg);}. Love:after {content: ""; Width:70px;height:110px;background: #f00;p osition:absolute;border-top-left-radius:50%; Border-top-right-radius:50%;transform:rotate ( -45DEG); left: -30px;}

3, Eating Beans (Pac-Man's production method is to make a transparent triangle inside a circle first)

                . Pacman {/* cannibal bean */width:0;    height:0;    border:60px solid #f00;    border-right:60px solid transparent;    border-radius:100%;}

　　

4, dialog box (the Message prompt box can make a rounded rectangle, and then place a triangle where needed)

               . alertdialog {/* dialog box: A rounded rectangle and a small triangle */width:150px;height:100px;background: #f00; border-radius:10px;position: relative;}.    Alertdialog:before {content: ""; width:0;height:0;position:absolute;    Left: -20px;    top:40px;border-top:10px solid transparent;    border-bottom:10px solid transparent;    border-right:20px solid #f00;}

5, Diamond (first draw a right-angled trapezoid, and then through the pseudo-class element below it to draw a triangle)

               . Diamond {/* Diamonds: trapezoidal and triangular composition */width:50px;height:0;position:relative;border-bottom:25px solid #f00; border-left:25px soli D transparent;border-right:25px solid Transparent;}.    Diamond:before {content: ""; width:0;height:0;position:absolute;    border-left:50px solid transparent;    border-right:50px solid transparent;    border-top:70px solid #f00;    Left: -25px;    top:25px;}

6, Pentagram (star-shaped implementation is more complex, mainly using the Transform property to rotate different edges)

                . starfive {/* Pentagram: */width:0;height:0;position:relative;border-left:80px solid transparent;border-right:80px Solid TR ansparent;border-bottom:60px solid #f00; Transform:rotate (35deg);}. Starfive:before {content: "";p osition:absolute;width:0;height:0;border-left:80px solid Transparent;border-right: 80px solid transparent;border-bottom:60px solid #f00; Transform:rotate ( -70deg); Top:3px;left: -80px;}. Starfive:after {content: "";p osition:absolute;width:0;height:0;border-bottom:60px solid #f00; border-right:20px    Solid transparent;border-left:20px Solid Transparent;transform:rotate ( -35deg);    Top: -40px;    Left: -49px;}

7. Menu (combination:: Before and:: After two pseudo-elements)

. Btn-hamburger I {    /* position:relative; *    /display:-moz-inline-stack;    Display:inline-block;    zoom:1;    width:22px;    height:3px;    Color: #fff;    Font:bold. 24rem/0.4 Helvetica;    Text-transform:uppercase;    Text-indent: -55px;    Background: #fff;    Transition:all 0.2s ease-out;}. Btn-hamburger I::before,. Btn-hamburger i::after {    content: ';    width:22px;    height:3px;    Background: #fff;    Position:absolute;    left:0;    Transition:0.2s;}. Btn-hamburger I::before {    top: -7px;}. Btn-hamburger i::after {    bottom: -7px;}

　

Graphic drawing of CSS3