The basic graphics of CSS's pure css (rectangle, circle, triangle, polygon, love, gossip, etc.)

Source: Internet
Author: User

The graph includes basic rectangles, circles, ellipses, triangles, and polygons, as well as a slightly more complex love, diamonds, and yin-yang gossip. Of course there are some need to use the CSS3 properties, so when you open this article, I hope you use Firefox or Chrome, of course, ie can also see part of the. Well, here's a look at how we use pure CSS to draw these graphics, if you also feel very shocked, recommend to your friends.

1, Square

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#square {
width:100px;
height:100px;
background:red;
}

2. Rectangle

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#rectangle {
width:200px;
height:100px;
background:red;
}

3, round

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#circle {
width:100px;
height:100px;
background:red;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
}

4. Ellipse

Final effect:

The CSS code is as follows:


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

5, the upper triangle

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#triangle-up {
width:0;
height:0;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-bottom:100px solid red;
}

6. Lower Triangle

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#triangle-down {
width:0;
height:0;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-top:100px solid red;
}

7. Left Triangle

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#triangle-left {
width:0;
height:0;
border-top:50px solid Transparent;
border-right:100px solid red;
border-bottom:50px solid Transparent;
}

8. Right Triangle

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#triangle-right {
width:0;
height:0;
border-top:50px solid Transparent;
border-left:100px solid red;
border-bottom:50px solid Transparent;
}

9, the upper left triangle

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#triangle-topleft {
width:0;
height:0;
border-top:100px solid red;
border-right:100px solid Transparent;
}

10, the upper right triangle

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#triangle-topright {
width:0;
height:0;
border-top:100px solid red;
border-left:100px solid Transparent;
}

11. Lower Left Triangle

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#triangle-bottomleft {
width:0;
height:0;
border-bottom:100px solid red;
border-right:100px solid Transparent;
}

12. Lower Right Triangle

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#triangle-bottomright {
width:0;
height:0;
border-bottom:100px solid red;
border-left:100px solid Transparent;
}

13, Parallelogram

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#parallelogram {
width:150px;
height:100px;
margin-left:20px;
-webkit-transform:skew (20DEG);
-moz-transform:skew (20DEG);
-o-transform:skew (20DEG);
background:red;
}

14, Trapezoid

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#trapezoid {
border-bottom:100px solid red;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
height:0;
width:100px;
}

15. Hexagonal Star

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#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;
}

16. Pentagram

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#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);
}
#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);
}
#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);
Content: ";
}

17. The Pentagon

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#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;
}

18. Hexagon

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#hexagon {
width:100px;
height:55px;
background:red;
position:relative;
}
#hexagon: Before {
Content: "";
Position:absolute;
Top: -25px;
left:0;
width:0;
height:0;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-bottom:25px solid red;
}
#hexagon: After {
Content: "";
Position:absolute;
Bottom: -25px;
left:0;
width:0;
height:0;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-top:25px solid red;
}

19, octagonal

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#octagon {
width:100px;
height:100px;
background:red;
position:relative;
}
#octagon: Before {
Content: "";
Position:absolute;
top:0;
left:0;
BORDER-BOTTOM:29PX solid red;
BORDER-LEFT:29PX solid #eee;
BORDER-RIGHT:29PX solid #eee;
width:42px;
height:0;
}
#octagon: After {
Content: "";
Position:absolute;
bottom:0;
left:0;
BORDER-TOP:29PX solid red;
BORDER-LEFT:29PX solid #eee;
BORDER-RIGHT:29PX solid #eee;
width:42px;
height:0;
}

20. Love

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#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;
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%;
}

21, infinity Symbol

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#infinity {
position:relative;
width:212px;
height:100px;
}
#infinity: Before,
#infinity: After {
Content: "";
Position:absolute;
top:0;
left:0;
width:60px;
height:60px;
border:20px solid red;
-moz-border-radius:50px 50px 0 50px;
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);
}

22. Eggs

Final effect

The CSS code is as follows:


Copy the code code as follows:
#egg {
Display:block;
width:126px;
height:180px;

-webkit-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

23, eating cute (Pac-man)

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#pacman {
width:0px;
height:0px;
border-right:60px solid Transparent;
border-top:60px solid red;
border-left:60px solid red;
border-bottom:60px solid red;
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:60px;
border-bottom-right-radius:60px;
}

24. Prompt dialog box

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#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;
}

25, 12 Point Star

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#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);
}

26, 8 Point Star

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#burst-8 {
background:red;
width:80px;
height:80px;
position:relative;
Text-align:center;
-webkit-transform:rotate (20DEG);
-moz-transform:rotate (20DEG);
-ms-transform:rotate (20DEG);
-o-transform:rotate (20EG);
Transform:rotate (20DEG);
}
#burst -8:before {
Content: "";
Position:absolute;
top:0;
left:0;
height:80px;
width:80px;
background:red;
-webkit-transform:rotate (135DEG);
-moz-transform:rotate (135DEG);
-ms-transform:rotate (135DEG);
-o-transform:rotate (135DEG);
Transform:rotate (135DEG);
}

27. Diamond

Final effect:

The CSS code is as follows:


Copy the code code as follows:
#cut-diamond {
Border-style:solid;
Border-color:transparent transparent red transparent;
border-width:0 25px 25px 25px;
height:0;
width:50px;
position:relative;
margin:20px 0 50px 0;
}
#cut-diamond:after {
Content: "";
Position:absolute;
top:25px;
Left: -25px;
width:0;
height:0;
Border-style:solid;
border-color:red transparent transparent transparent;
border-width:70px 50px 0 50px;
}

28, the yin and yang gossip (domineering this)

The CSS code is as follows:


Copy the code code as follows:
#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;
}

Well, that's it, there are 28 of them, and I think there are a few more sharp ones behind. The source of the code is css-tricks. By the Green Rattan House blog Finishing, reproduced please keep the original link: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html

Reproduced

The basic graphics of CSS's pure css (rectangle, circle, triangle, polygon, love, gossip, etc.)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.