http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet

http://www.cnblogs.com/powertoolsteam/p/css-create-irregular-shapes.html Irregular through pictures DIV

http://www.cnblogs.com/leshao/p/5674720.html adopt after+ Rotate to achieve

1、 Square (square):

CSS Code:

 .square {
width: 100px;
height:100px;
background: #E5C3B2;
}

The above method is , Set the width and height to be consistent to achieve the effect of a square , Here is an example boder The effect of making a square :

 .square {
width:0;
height:0;
border: 50px solid #E5C3B2;/* The size of the border is equal to the width of the square ( Or height ) Half of */
}

effect :

2、 parallelogram (parallelogram)

CSS Code:

 .parallelogram {
width: 100px;
height: 70px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
transform: skew(20deg);
background: #E5C3B2;
}

effect :

We can go through “skew” To control the angle , If the value is negative , Will change the direction of the twist :

 .parallelogram2 {
width: 100px;
height: 70px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
-ms-transform: skew(-20deg);
transform: skew(-20deg);
background: #E5C3B2;
}

effect :

3、 The diamond (diamond)

CSS Code:

 .diamond {
width: 80px;
height: 80px;
margin: 40px 0 0 40px;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
background: #E5C3B2;
}

effect :

4、 Rectangle ()

CSS Code:

 .rectangle {
width: 100px;
height: 50px;
background: #E5C3B2;
}

effect :

5、 trapezoid (trapezoid)

Trapezoid one

CSS Code:

 .trapezoid-1 {
height: 0;
width: 100px;
border-bottom: 100px solid #e5c3b2;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

effect :

Trapezoid two

CSS Code:

 .trapezoid-2 {
height: 0;
width: 100px;
border-top: 100px solid #e5c3b2;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

effect :

Trapezoid three

CSS Code:

 .trapezoid-3 {
height: 100px;
width: 0;
border-right: 100px solid #e5c3b2;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}

effect :

Trapezoid four

CSS Code:

 .trapezoid-4 {
height: 100px;
width: 0;
border-left: 100px solid #e5c3b2;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}

effect :

6、 triangle (triangle)

The triangle is up

CSS Code:

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

effect :

The triangle is to the right

CSS Code:

 .triangle-rihgt {
height: 0;
width: 0;
border: 50px solid #e5c3b2;
border-color: transparent transparent transparent #e5c3b2;
}

effect :

Triangle down

CSS Code:

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

effect :

The triangle is to the left

CSS Code:

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

effect :

7、 Semicircle (semicircle)

The upper half circle

CSS Code:

 .semicircle-top {
background: #e5c3b2;
height: 25px;
width: 50px;
-moz-border-radius: 50px 50px 0 0;
-webkit-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
}

effect :

Right semicircle

CSS Code:

 .semicircle-right {
background: #e5c3b2;
height: 50px;
width: 25px;
-moz-border-radius: 0 0px 50px 0;
-webkit-border-radius:0 50px 50px 0;
border-radius:0 50px 50px 0;
}

effect :

The lower half circle

CSS Code:

 .semicircle-down {
background: #e5c3b2;
height: 25px;
width: 50px;
-moz-border-radius:0 0 50px 50px;
-webkit-border-radius:0 0 50px 50px;
border-radius:0 0 50px 50px;
}

effect :

Left semicircle

CSS Code:

 .semicircle-left {
background: #e5c3b2;
height: 50px;
width: 25px;
-moz-border-radius:50px 0 0 50px;
-webkit-border-radius:50px 0 0 50px;
border-radius:50px 0 0 50px;
}

effect :

8、 round (circle)

CSS Code:

 .circle {
background: #e5c3b2;
height: 50px;
width: 50px;
-moz-border-radius: 25px;
-webkit-border-radius:25px;
border-radius: 25px;
}

effect :

9、 The ellipse (oval)

Horizontal ellipse

CSS Code:

 .ovalHor {
background: #e5c3b2;
height: 40px;
width: 80px;
-moz-border-radius: 40px/20px;
-webkit-border-radius:40px/20px;
border-radius: 40px/20px;
}

effect :

Vertical ellipse

CSS Code:

 .ovalVert {
background: #e5c3b2;
height: 80px;
width: 40px;
-moz-border-radius: 20px/40px;
-webkit-border-radius:20px/40px;
border-radius: 20px/40px;
}

effect :

10、 Chart (chartColorful)

CSS Code:

 .chartColorful {
height: 0px;
width: 0px;
border: 50px solid red;
border-color: purple red yellow orange;
-moz-border-radius: 50px;
-webkit-border-radius:50px;
border-radius: 50px;
}

effect :

11、 Quarter circle (quarterCircle)

Quarter circle ( On )

CSS Code:

 .quarterCircleTop {
background: #e5c3b2;
height: 50px;
width: 50px;
-moz-border-radius: 50px 0 0 0;
-webkit-border-radius: 50px 0 0 0;
border-radius: 50px 0 0 0;
}

effect :

Quarter circle ( Right )

CSS Code:

 .quarterCircleRight {
background: #e5c3b2;
height: 50px;
width: 50px;
-moz-border-radius: 0 50px 0 0;
-webkit-border-radius: 0 50px 0 0;
border-radius:0 50px 0 0;
}

effect :

Quarter circle ( Next )

CSS Code:

 .quarterCircleBottom {
background: #e5c3b2;
height: 50px;
width: 50px;
-moz-border-radius: 0 0 50px 0;
-webkit-border-radius: 0 0 50px 0;
border-radius:0 0 50px 0;
}

effect :

Quarter circle ( Left )

CSS Code:

 .quarterCircleLeft {
background: #e5c3b2;
height: 50px;
width: 50px;
-moz-border-radius: 0 0 0 50px;
-webkit-border-radius: 0 0 0 50px;
border-radius:0 0 0 50px;
}

effect :

12、Chart(quarterCircle)

Chart( On )

CSS Code:

 .chartTop {
height: 0px;
width: 0px;
border:50px solid #e5c3b2;
border-top-color: transparent;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

effect :

Chart( Right )

CSS Code:

 .chartRight{
height: 0px;
width: 0px;
border:50px solid #e5c3b2;
border-right-color: transparent;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

effect :

Chart( Next )

CSS Code:

 .chartBottom {
height: 0px;
width: 0px;
border:50px solid #e5c3b2;
border-bottom-color: transparent;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

effect :

Chart( Left )

CSS Code:

 .chartLeft {
height: 0px;
width: 0px;
border:50px solid #e5c3b2;
border-left-color: transparent;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

effect :

13、 heart-shaped (heart)

Left heart

CSS Code

 .heartLeft{
width: 0;
height: 0;
border-color: red;
border-style: dotted;
border-width: 0 40px 40px 0;
}

effect :

Right heart

CSS Code

 .heartRight{
width: 0;
height: 0;
border-color: red;
border-style: dotted;
border-width: 0 0 40px 40px;
}

effect :

14、 Coloured ribbon (ribbon)

CSS Code

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

effect :

It's up there with CSS To make the 32 It's a graphic effect , Of course, you can also use your imagination and creativity , Make some more beautiful graphics .

 

 http://www.w3cplus.com/css/create-shapes-with-css

How to work ?

Few people realize that , When the browser draws border, There will be a problem of angle . We just have to use this technique to create a triangle effect . We just need to make sure that the border on one side is colored , Other border colors are transparent , So we can easily make triangles , Then change its size to achieve different effects . Let's look at a piece of code :

 .css-arrow-multicolor {
border-color: red green blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}
 

As you can see, the above code segment uses border Four triangles made , These triangles are right triangles, the size of their boundaries , If you change border-width Size , What you're going to get is another triangle

 .css-arrow-acute {
border-color: red green blue orange;
border-style:solid;
border-width:25px 10px 15px 30px;
width:0;
height:0;
}
 

When you change border-style when , You'll find some amazing effects :

 border-style: dotted;
 

But this idea is not supported in different browsers .

Now let's go through the code , Look at the different types of making

One 、 Square (Square)

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

The square is the simplest , Just make sure that the width and height of the elements are the same , So you OK 了 . Of course, we can also use border Draw a square directly , You can think about how to draw it , I won't write it down , But the use of border Draw a square , It can't be filled with content .

effect :

Two 、 Rectangle (Rectangle)

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

Change their size on the basis of a square , Make sure width and height Just different values .

effect :

3、 ... and 、 circular (Circle)

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

effect :

The making of circles , We're going to use CSS3 Medium border-radius attribute . In the process of making , There are several points to pay attention to , One is the same width and height , Second, the fillet value is half of the width or height value . It is also suggested to set the fillet value to 50%, But I was Webkit There have been cases in which percentages are not supported .

Four 、 Semicircle (Semicircle)

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

Semicircles and circles are made in the same way , But it needs to match the height of the elements , The width and the orientation of the fillet , Make a semicircle effect .

effect :

5、 ... and 、 Sector (Fan-Shaped)

 #fanShaped {
background: none repeat scroll 0 0 red;
-webkit-border-radius: 50px 0 0 0;
-moz-border-radius: 50px 0 0 0;
border-radius: 50px 0 0 0;
height: 50px;
width: 50px;
}

The sector here is the quarter circle effect , Making a quarter circle is the same as making a semicircle , What we need to cooperate with is the three attribute values of the element , Specific you can refer to the above code .

effect :

6、 ... and 、 ellipse (Oval)

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

It's used here border-radius Of X/Y Two axis values , Make a deformed fillet , At the same time, the matching width is equal to , It's like an oval .

effect :

7、 ... and 、 Triangle effect (Triangle)

From the beginning of the tutorial, it's called triangle effect , It's not about how it's done , I'll list a few common triangle codes here , For your reference only

1、 Triangle up

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

border-bottom Set the color

2、 Triangle down

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

border-top Set the color

3、 Triangle left

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

border-right Set the color

4、 Triangle right

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

border-left Set the color

5、 Upper left triangle

 #triangle-topleft {
width: 0;
height: 0;
border: 100px solid red;
border-color: red transparent transparent red;
}

Set the top and left color values .

6、 The upper right triangle

 #triangle-topright {
width: 0;
height: 0;
border: 100px solid red;
border-color: red red transparent transparent;
}

Set the border color at the top and right of the element

7、 Lower left triangle

 #triangle-bottomleft {
width: 0;
height: 0;
border: 100px solid red;
border-color: transparent transparent red red;
}

Set the border color at the bottom and left of the element

8、 Lower right triangle

 #triangle-bottomright {
width: 0;
height: 0;
border: 100px solid red;
border-color: transparent red red transparent;
}

Set the border color on the right and bottom of the element .

effect :

It's about making triangles , You can refer to :《Creating Triangles in CSS》、《How to Create DIV Shapes Like Triangles and Circles 》、《CSS The triangle method 》、《Using borders to produce angled shapes》 etc. .

8、 ... and 、 parallelogram (Parallelogram)

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

Parallelogram is a rectangle based on the use of a CSS3 Of transform attribute . Using the deformation effect .

effect :

Nine 、 Hexagon

 #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;
}

This hexagonal star uses a “:after” Make another triangle in the opposite direction , Stack up in the positioning , So it's a hexagonal star , To put it bluntly, two triangles are put together to form a hexagonal star .

effect :

Ten 、 Five-pointed star

 #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(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
#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: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
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);
transform: rotate(-70deg);
content: '';
}

Five pointed star production , You can refer to Kit MacAllister Written 《CSS Only 5-Point Star》 One article .

effect :

11、 ... and 、 heart-shaped

 #heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
-webkit-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%;
}

effect :

Twelve 、Pac-Man

 #pac-man {
width: 0px;
height: 0px;
border: 60px solid red;
border-color: red transparent red red ;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}

effect :

13、 ... and 、 Dialogue bubble (Talk Bubble)

 #talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}

There's more about making dialogue bubbles , You can also refer to Nicolas Of 《Pure CSS speech bubbles》.

effect :

fourteen 、Point Burst

 #burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before,
#burst-12:after {
content: "";
position: absolute;
top: 0; left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

effect :

15、 ... and 、 Yin Yang diagram

 #yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position:
absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}

effect :

The graphics above are all in color CSS Or part of it CSS3 It's made out of the attributes of , Isn't it very interesting , If you like this tutorial , You can also click CSS3-Tricks Provided 《The Shapes of CSS》 It shows more than ten methods of making graphics . Because part of the graphic effects use CSS3 Some of the properties of , If you're still using IE Words , I suggest you use modern browsers , such as :Mozilla FirefoxGoogle ChromeSafariOpera. Some of the effects shown above may not be practical , But use css Making triangles and circles has a lot of effect , Especially for making tips effect .

pure CSS Make a graphic effect

Method / step

 
  1. 1

    Make a circle :

    To use CSS To make a circle , We need a div, It was given a ID

    <div id="circle"></div> 

    The circle is set CSS Set the width and height to be equal , Then set the border-radius Property is half of width or height :

    #circle {

        width: 120px;

        height: 120px;

        background: #7fee1d;

        -moz-border-radius: 60px;

        -webkit-border-radius: 60px;

        border-radius: 60px;

  2. 2

    Making ellipses :

    The ellipse is a variant of the regular circle , Also use a band ID Of div To make

    <div id="oval"></div>

    Set the oval CSS when , Set the height to half the width ,border-radius Attributes should also be changed accordingly :

    #oval {

        width: 200px;

        height: 100px;

        background: #e9337c;

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

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

        border-radius: 100px / 50px;

  3. 3

    Make triangles :

    To create a CSS triangle , Need to use border, By setting the transparency of different edges , We can make triangles as they are . in addition , In making triangles , The width and height should be set to 0.

    <div id="triangle"></div>  

                               

    #triangle {

        width: 0;

        height: 0;

        border-bottom: 140px solid #fcf921;

        border-left: 70px solid transparent;

        border-right: 70px solid transparent;

    }   

  4. 4

    Make an inverted triangle :

    Unlike regular triangles , What the inverted triangle should set is border-top、border-left and border-right The properties of the three sides :

    #triangle {

        width: 0;

        height: 0;

        border-top: 140px solid #20a3bf;

        border-left: 70px solid transparent;

        border-right: 70px solid transparent;

  5. 5

    Make the left triangle :

    What the left triangle does is border-top、border-left and border-right The properties of the three sides , The top and bottom should be set with transparent properties .

    #triangle_left {

        width: 0;

        height: 0;

        border-top: 70px solid transparent;

        border-right: 140px solid #6bbf20;

        border-bottom: 70px solid transparent;

    }  

  6. 6

    Make a diamond

    There are many ways to make diamonds . What we use here is transform Properties and rotate Combination , Make two positive and negative triangles show up and down .

    #diamond {

        width: 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;

  7. 7

    Making trapezoids :

    Trapezoid is a variant of triangle , Set up CSS When it's trapezoidal , The left and right sides are set equal , And give it a width .

    #trapezium {

        height: 0;

        width: 120px;

        border-bottom: 120px solid #ec3504;

        border-left: 60px solid transparent;

        border-right: 60px solid transparent;

  8. 8

    Make parallelogram :

    The parallelogram is made by using transform Attribute to tilt the rectangle by an angle .

    #parallelogram {

        width: 160px;

        height: 100px;

        background: #8734f7;

        -webkit-transform: skew(30deg);

        -moz-transform: skew(30deg);

        -o-transform: skew(30deg);

        transform: skew(30deg);

    }  

  9. 9

    Stars :

    Star shaped HTML The structure also uses a band ID Emptiness of div. The implementation of star is more complicated , Mainly used transform Property to rotate different edges . Take a closer look at the following code .

    #star {

        width: 0;

        height: 0;

        margin: 50px 0;

        color: #fc2e5a;

        position: relative;

        display: block;

        border-right: 100px solid transparent;

        border-bottom: 70px solid #fc2e5a;

        border-left: 100px solid transparent;

        -moz-transform: rotate(35deg);

        -webkit-transform: rotate(35deg);

        -ms-transform: rotate(35deg);

        -o-transform: rotate(35deg);

    }

      

    #star:before {

        height: 0;

        width: 0;

        position: absolute;

        display: block;

        top: -45px;

        left: -65px;

        border-bottom: 80px solid #fc2e5a;

        border-left: 30px solid transparent;

        border-right: 30px solid transparent;

        content: '';

        -webkit-transform: rotate(-35deg);

        -moz-transform: rotate(-35deg);

        -ms-transform: rotate(-35deg);

        -o-transform: rotate(-35deg);

    }

      

    #star:after {

        content: '';

        width: 0;

        height: 0;

        position: absolute;

        display: block;

        top: 3px;

        left: -105px;

        color: #fc2e5a;

        border-right: 100px solid transparent;

        border-bottom: 70px solid #fc2e5a;

        border-left: 100px solid transparent;

        -webkit-transform: rotate(-70deg);

        -moz-transform: rotate(-70deg);

        -ms-transform: rotate(-70deg);

        -o-transform: rotate(-70deg);

    }                              

  10. 10

    Hexagonal star :

    It's different from the five pointed star , The way to make a hexagonal star shape is to manipulate border Attribute to make two halves of the graph , And then merge them .

    #star_six_points {

        width: 0;

        height: 0;

        display: block;

        position: absolute;

        border-left: 50px solid transparent;

        border-right: 50px solid transparent;

        border-bottom: 100px solid #de34f7;

        margin: 10px auto;

    }

      

    #star_six_points:after {

        content: "";

        width: 0;

        height: 0;

        position: absolute;

        border-left: 50px solid transparent;

        border-right: 50px solid transparent;

        border-top: 100px solid #de34f7;

        margin: 30px 0 0 -50px;

    }                             

  11. 11

    hexagon :

    There are many ways to make hexagons , It can be like a Pentagon , Make a rectangle first , Then put a triangle on top of it and a triangle on the bottom of it .

    #hexagon {

        width: 100px;

        height: 55px;

        background: #fc5e5e;

        position: relative;

        margin: 10px auto;

    }

      

    #hexagon:before {

        content: "";

        width: 0;

        height: 0;

        position: absolute;

        top: -25px;

        left: 0;

        border-left: 50px solid transparent;

        border-right: 50px solid transparent;

        border-bottom: 25px solid #fc5e5e;

    }

      

    #hexagon:after {

        content: "";

        width: 0;

        height: 0;

        position: absolute;

        bottom: -25px;

        left: 0;

        border-left: 50px solid transparent;

        border-right: 50px solid transparent;

        border-top: 25px solid #fc5e5e;

    }      

  12. 12

    heart-shaped :

    The making of hearts is very complicated , You can use pseudo elements to make , Rotate the pseudo elements at different angles , And modify it transform-origin Attribute to the rotation center of the element .

    #heart {

        position: relative;

    }

      

    #heart:before,#heart:after {

        content: "";

        width: 70px;

        height: 115px;

        position: absolute;

        background: red;

        left: 70px;

        top: 0;

        -webkit-border-radius: 50px 50px 0 0;

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

    }          

  13. 13

    Egg shape :

    Egg shape is a variant of ellipse , It's a little higher than the width , And set the right border-radius Attribute can make an egg shape .

    #egg {

        width: 136px;

        height: 190px;

        background: #ffc000;

        display: block;

        -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

    }  

  14. 14

    Infinite sign :

    Infinity can be represented by border Property and setting pseudo elements .

    #infinity {

    width: 220px;

    height: 100px;

    position: relative;

    }

    #infinity:before,#infinity:after {

    content: "";

    width: 60px;

    height: 60px;

    position: absolute;

    top: 0;

    left: 0;

    border: 20px solid #06c999;

    -moz-border-radius: 50px 50px 0;

    border-radius: 50px 50px 0 50px;

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

    }

    #infinity:after {

    left: auto;

    right: 0;

    -moz-border-radius: 50px 50px 50px 0;

    border-radius: 50px 50px 50px 0;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    }

  15. 15

    Message box :

    The message prompt box can first make a rounded rectangle , Then place a triangle where you need it .

    #comment_bubble {

    width: 140px;

    height: 100px;

    background: #088cb7;

    position: relative;

    -moz-border-radius: 12px;

    -webkit-border-radius: 12px;

    border-radius: 12px;

    }

    #comment_bubble:before {

    content: "";

    width: 0;

    height: 0;

    right: 100%;

    top: 38px;

    position: absolute;

    border-top: 13px solid transparent;

    border-right: 26px solid #088cb7;

    border-bottom: 13px solid transparent;

    }

    END

Baidu Edition

【 turn 】CSS Make a quick look-up table of figures - More related articles on file

  1. CSS Make a quick look-up table of figures

    Few people realize that , When the browser draws border, There will be a problem of angle . We just have to use this technique to create a triangle effect . We just need to make sure that the border on one side is colored , Other border colors are transparent , So we can easily make triangles , Then change ...

  2. IE Various versions CSS Hack( Compatibility processing ) Grammar quick reference table

    For compatibility IE Versions , Need to be in CSS Add extra code to , For example, the commonly used _width. The reason why I work , It's because browsers ignore style rules that cannot be resolved , So for example , hold _width Written in width below , For non IE Browser meeting ...

  3. HTML5 Quick reference table

    HTML5 Quick reference table label describe edition attribute <!--...--> Definition notes 4 / 5 none <!DOCTYPE> Define document types 4 / 5 none <a> set ...

  4. [ translate ]Django Quick reference table

    The original text is here :https://code.djangoproject.com/wiki/DjangoCheatSheet Django Quick reference table Django The tutorial is already very good . The purpose of this quick reference table is to create a quick start ...

  5. GNU Emacs Order quick reference table

    GNU Emacs Order quick reference table Chapter one   Emacs Basic concepts of surface 1-1:Emacs Main mode of editor Pattern function The basic pattern (fundamental mode) The default mode , No special behavior Text mode (text m ...

  6. Practical palm treasure --HTML&amp;CSS Quick reference manual for common labels PDF Scanning version

    Practical palm treasure --HTML&CSS Quick reference manual for common labels Content recommendation : The first part of this book is a combination of grammar and examples , Explained in detail HTML The function of each element and its attribute in language . Syntax and display effects : The second one is from CSS The basic concept begins , , respectively, ...

  7. HTML Symbol code quick reference table

    HTML Entity symbols are used to implement reserved characters (reserved characters) Or express some common characters that the keyboard can't input . In most browsers, the default character set is ISO-8859-1.HTML Entity symbols make us experience in web design ...

  8. concise Git Order quick reference table ( Chinese version )

    The original quotation address :https://github.com/flyhigher139/Git-Cheat-Sheet/blob/master/Git%20Cheat%20Sheet-Zh.md stay Github On ...

  9. .htaccess Next Flags Quick reference table

    Flags Is an optional parameter , When more than one sign appears at the same time , They are separated by commas . Quick reference table : RewirteRule Mark meaning describe R Redirect Send out a HTTP Redirect F Forbidden No right URL ...

Random recommendation

  1. Atitit Diversification strategy Suitable for our development Core business of attilax summary

    Atitit Diversification strategy Suitable for our development Core business of attilax summary 1.1. The general trend of history , The global flow of people 1 1.2. Food and clothing live line 1 1.3. The strategy of encircling the city from the countryside 1 1.4. Move the three mountains ( housing ...

  2. classpath: and classpath*: The difference between

    classpath The essence is jvm Root path ,jvm All resources are obtained from the root path , Notice that the root path is a logical path , It's not a disk path . For example, two. jar The path of the package is /a/a.jar and /b/b.jar, But with classpa ...

  3. express-partials And express4.x Incompatibilities

    stay express Set in view engine by html,express-partials It can lead to incorrect grammar , In fact, only one line of code can be changed function renderer(ext){ if(ext[ ...

  4. javascript confirm() Function usage

    javascript confirm() Function usage confirm(): Confirmation message dialog . Actions that allow users to make choices . The pop-up dialog box contains a OK button and a cancel button . confirm(str) Parameter description : st ...

  5. Python Language Essentials --- Next

    function : Multiple values can be returned , In fact, a function returns an object , It's tuples , The elements in the tuple are split into the result variables Anonymous functions : lambda function , Just a single statement , The result is the return value This function does not provide a name property Closure : cl ...

  6. android And location Get longitude and latitude information according to the interface

    http://maps.googleapis.com/maps/api/geocode/json?address=%E7%A6%8F%E5%BB%BA&sensor=falsehttp://m ...

  7. Nunit Summary

    One .NUnit Is a unit testing framework , Special for .NET To write it . In fact, there are JUnit(Java),CPPUnit(C++), They are all xUnit A member of the . first , It's from JUnit And come . The current version is 2.2. continue with ...

  8. Newly installed mysql It has to be adjusted 10 Item Configuration

    Still working on the new mysql service , I don't know which default configuration to modify ?mysql Adjustable parameters are 100 Multiple , At the end of the day ! immediately ! Adjust which of the most important parameters ? Network god post reply you : This article mainly introduces MySQL Optimization must be adjusted 1 ...

  9. Jmeter Concurrent test

    Link recommendation :https://blog.csdn.net/weixin_41291554/article/details/80492276

  10. 2018.11.28 poj3294 Life Forms( The suffix array + Double pointer )

    Portal Suffix array classic title . Let's put all the strings together first . Then find out hththt Array and sasasa Array . And then to sasasa Array run double pointer statistical answer . If the number of different strings included in the double pointer reaches the question ...