Basic graphics for pure CSS (rectangle, circle, triangle, polygon, love, gossip, etc.)
Last Update:2016-07-08
Source: Internet
Author: User
<span id="Label3"></p><p><p></p></p><p><p>1, Square</p></p><p><p></p></p>#square {<br>width:100px;<br>height:100px;<br>background:red;<br>}<p><p>2. Rectangle</p></p>#rectangle {<br>width:200px;<br>height:100px;<br>background:red;<br>}<p><p>3, Round</p></p>#circle {<br>width:100px;<br>height:100px;<br>background:red;<br>-moz-border-radius:50px;<br>-webkit-border-radius:50px;<br>border-radius:50px;<br>}<p><p>4. Ellipse</p></p><p><p><span style="line-height: 1.5;">#oval {</span></p></p>width:200px;<br>height:100px;<br>background:red;<br>-moz-border-radius:100px/50px;<br>-webkit-border-radius:100px/50px;<br>border-radius:100px/50px;<br>}<p><p>5, the upper Triangle</p></p>#triangle-up {<br>width:0;<br>height:0;<br>border-left:50px Solid transparent;<br>border-right:50px Solid transparent;<br>border-bottom:100px Solid red;<br>}<p><p>6. Lower Triangle</p></p>#triangle-down {<br>width:0;<br>height:0;<br>border-left:50px Solid transparent;<br>border-right:50px Solid transparent;<br>border-top:100px Solid red;<br>}<p><p>7. Left Triangle</p></p><p><p></p></p>#triangle-left {<br>width:0;<br>height:0;<br>border-top:50px Solid transparent;<br>border-right:100px Solid red;<br>border-bottom:50px Solid transparent;<br>}<p><p>8. Right Triangle</p></p><p><p></p></p>#triangle-right {<br>width:0;<br>height:0;<br>border-top:50px Solid transparent;<br>border-left:100px Solid red;<br>border-bottom:50px Solid transparent;<br>}<p><p>9, the upper left Triangle</p></p><p><p></p></p>#triangle-topleft {<br>width:0;<br>height:0;<br>border-top:100px Solid red;<br>border-right:100px Solid transparent;<br>}<p><p>10, the upper right triangle</p></p>#triangle-topright {<br>width:0;<br>height:0;<br>border-top:100px Solid red;<br>border-left:100px Solid transparent;<br>}<p><p>11. Lower Left Triangle</p></p><p><p></p></p>#triangle-bottomleft {<br>width:0;<br>height:0;<br>border-bottom:100px Solid red;<br>border-right:100px Solid transparent;<br>}<p><p>12. Lower Right Triangle</p></p><p><p></p></p>#triangle-bottomright {<br>width:0;<br>height:0;<br>border-bottom:100px Solid red;<br>border-left:100px Solid transparent;<br>}<p><p>13, Parallelogram</p></p><p><p></p></p>#parallelogram {<br>width:150px;<br>height:100px;<br>margin-left:20px;<br>-webkit-transform:skew (20deg);<br>-moz-transform:skew (20deg);<br>-o-transform:skew (20deg);<br>background:red;<br>}<p><p>14, trapezoid</p></p><p><p></p></p>#trapezoid {<br>border-bottom:100px Solid red;<br>border-left:50px Solid transparent;<br>border-right:50px Solid transparent;<br>height:0;<br>width:100px;<br>}<p><p>15. Hexagonal Star</p></p>#star-six {<br>width:0;<br>height:0;<br>border-left:50px Solid transparent;<br>border-right:50px Solid transparent;<br>border-bottom:100px Solid red;<br>position:relative;<br>}<br>#star-six:after {<br>width:0;<br>height:0;<br>border-left:50px Solid transparent;<br>border-right:50px Solid transparent;<br>border-top:100px Solid red;<br>position:absolute;<br>Content: "";<br>top:30px;<br>Left: -50px;<br>}<p><p>16. Pentagram</p></p>#star-five {<br>margin:50px 0;<br>position:relative;<br>display:block;<br>color:red;<br>width:0px;<br>height:0px;<br>border-right:100px Solid transparent;<br>border-bottom:70px Solid red;<br>border-left:100px Solid transparent;<br>-moz-transform:rotate (35deg);<br>-webkit-transform:rotate (35deg);<br>-ms-transform:rotate (35deg);<br>-o-transform:rotate (35deg);<br>}<br>#star-five:before {<br>border-bottom:80px Solid red;<br>border-left:30px Solid transparent;<br>border-right:30px Solid transparent;<br>position:absolute;<br>height:0;<br>width:0;<br>Top: -45px;<br>Left: -65px;<br>display:block;<br>Content: ";<br>-webkit-transform:rotate ( -35deg);<br>-moz-transform:rotate ( -35deg);<br>-ms-transform:rotate ( -35deg);<br>-o-transform:rotate ( -35deg);<br>}<br>#star-five:after {<br>position:absolute;<br>display:block;<br>color:red;<br>top:3px;<br>Left: -105px;<br>width:0px;<br>height:0px;<br>border-right:100px Solid transparent;<br>border-bottom:70px Solid red;<br>border-left:100px Solid transparent;<br>-webkit-transform:rotate ( -70deg);<br>-moz-transform:rotate ( -70deg);<br>-ms-transform:rotate ( -70deg);<br>-o-transform:rotate ( -70deg);<br>Content: ";<br>}<p><p>17. The Pentagon</p></p><p><p></p></p>#pentagon {<br>position:relative;<br>width:54px;<br>border-width:50px 18px 0;<br>border-style:solid;<br>Border-color:red transparent;<br>}<br>#pentagon: before {<br>Content: "";<br>position:absolute;<br>height:0;<br>width:0;<br>Top: -85px;<br>Left: -18px;<br>border-width:0 45px 35px;<br>border-style:solid;<br>Border-color:transparent Transparent red;<br>}<p><p>18. Hexagon</p></p><p><p></p></p>#hexagon {<br>width:100px;<br>height:55px;<br>background:red;<br>position:relative;<br>}<br>#hexagon: before {<br>Content: "";<br>position:absolute;<br>Top: -25px;<br>left:0;<br>width:0;<br>height:0;<br>border-left:50px Solid transparent;<br>border-right:50px Solid transparent;<br>border-bottom:25px Solid red;<br>}<br>#hexagon: after {<br>Content: "";<br>position:absolute;<br>Bottom: -25px;<br>left:0;<br>width:0;<br>height:0;<br>border-left:50px Solid transparent;<br>border-right:50px Solid transparent;<br>border-top:25px Solid red;<br>}<p><p>19, Octagonal</p></p>#octagon {<br>width:100px;<br>height:100px;<br>background:red;<br>position:relative;<br>}<br>#octagon: before {<br>Content: "";<br>position:absolute;<br>top:0;<br>left:0;<br>BORDER-BOTTOM:29PX Solid red;<br>BORDER-LEFT:29PX Solid #eee;<br>BORDER-RIGHT:29PX Solid #eee;<br>width:42px;<br>height:0;<br>}<br>#octagon: after {<br>Content: "";<br>position:absolute;<br>bottom:0;<br>left:0;<br>BORDER-TOP:29PX Solid red;<br>BORDER-LEFT:29PX Solid #eee;<br>BORDER-RIGHT:29PX Solid #eee;<br>width:42px;<br>height:0;<br>}<p><p>20. Love</p></p><p><p></p></p>#heart {<br>position:relative;<br>width:100px;<br>height:90px;<br>}<br>#heart: before,<br>#heart: after {<br>position:absolute;<br>Content: "";<br>left:50px;<br>top:0;<br>width:50px;<br>height:80px;<br>background:red;<br>-moz-border-radius:50px 50px 0 0;<br>border-radius:50px 50px 0 0;<br>-webkit-transform:rotate ( -45deg);<br>-moz-transform:rotate ( -45deg);<br>-ms-transform:rotate ( -45deg);<br>-o-transform:rotate ( -45deg);<br>Transform:rotate ( -45deg);<br>-webkit-transform-origin:0 100%;<br>-moz-transform-origin:0 100%;<br>-ms-transform-origin:0 100%;<br>-o-transform-origin:0 100%;<br>transform-origin:0 100%;<br>}<br>#heart: after {<br>left:0;<br>-webkit-transform:rotate (45deg);<br>-moz-transform:rotate (45deg);<br>-ms-transform:rotate (45deg);<br>-o-transform:rotate (45deg);<br>Transform:rotate (45deg);<br>-webkit-transform-origin:100% 100%;<br>-moz-transform-origin:100% 100%;<br>-ms-transform-origin:100% 100%;<br>-o-transform-origin:100% 100%;<br>transform-origin:100% 100%;<br>}<p><p>21, Infinity Symbol</p></p><p><p></p></p>#infinity {<br>position:relative;<br>width:212px;<br>height:100px;<br>}<br>#infinity: before,<br>#infinity: after {<br>Content: "";<br>position:absolute;<br>top:0;<br>left:0;<br>width:60px;<br>height:60px;<br>border:20px Solid red;<br>-moz-border-radius:50px 50px 0 50px;<br>border-radius:50px 50px 0 50px;<br>-webkit-transform:rotate ( -45deg);<br>-moz-transform:rotate ( -45deg);<br>-ms-transform:rotate ( -45deg);<br>-o-transform:rotate ( -45deg);<br>Transform:rotate ( -45deg);<br>}<br>#infinity: after {<br>left:auto;<br>right:0;<br>-moz-border-radius:50px 50px 50px 0;<br>border-radius:50px 50px 50px 0;<br>-webkit-transform:rotate (45deg);<br>-moz-transform:rotate (45deg);<br>-ms-transform:rotate (45deg);<br>-o-transform:rotate (45deg);<br>Transform:rotate (45deg);<br>}<p><p>22. Eggs</p></p>#egg {<br>display:block;<br>width:126px;<br>height:180px;<br><br>-webkit-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;<br>border-radius:50% 50% 50% 50%/60% 60% 40% 40%;<br>}<p><p>23, Eating Cute (pac-man)</p></p><p><p></p></p>#pacman {<br>width:0px;<br>height:0px;<br>border-right:60px Solid transparent;<br>border-top:60px Solid red;<br>border-left:60px Solid red;<br>border-bottom:60px Solid red;<br>border-top-left-radius:60px;<br>border-top-right-radius:60px;<br>border-bottom-left-radius:60px;<br>border-bottom-right-radius:60px;<br>}<p><p>24. Prompt dialog box</p></p><p><p></p></p><p><p>Final Effect:</p></p>#talkbubble {<br>width:120px;<br>height:80px;<br>background:red;<br>position:relative;<br>-moz-border-radius:10px;<br>-webkit-border-radius:10px;<br>border-radius:10px;<br>}<br>#talkbubble: before {<br>Content: "";<br>position:absolute;<br>right:100%;<br>top:26px;<br>width:0;<br>height:0;<br>BORDER-TOP:13PX Solid transparent;<br>BORDER-RIGHT:26PX Solid red;<br>BORDER-BOTTOM:13PX Solid transparent;<br>}<p><p>25, 12 Point Star</p></p>#burst-12 {<br>background:red;<br>width:80px;<br>height:80px;<br>position:relative;<br>text-align:center;<br>}<br>#burst -12:before, #burst -12:after {<br>Content: "";<br>position:absolute;<br>top:0;<br>left:0;<br>height:80px;<br>width:80px;<br>background:red;<br>}<br>#burst -12:before {<br>-webkit-transform:rotate (30deg);<br>-moz-transform:rotate (30deg);<br>-ms-transform:rotate (30deg);<br>-o-transform:rotate (30deg);<br>Transform:rotate (30deg);<br>}<br>#burst -12:after {<br>-webkit-transform:rotate (60deg);<br>-moz-transform:rotate (60deg);<br>-ms-transform:rotate (60deg);<br>-o-transform:rotate (60deg);<br>Transform:rotate (60deg);<br>}<p><p>26, 8 Point Star</p></p><p><p></p></p>#burst-8 {<br>background:red;<br>width:80px;<br>height:80px;<br>position:relative;<br>text-align:center;<br>-webkit-transform:rotate (20deg);<br>-moz-transform:rotate (20deg);<br>-ms-transform:rotate (20deg);<br>-o-transform:rotate (20eg);<br>Transform:rotate (20deg);<br>}<br>#burst -8:before {<br>Content: "";<br>position:absolute;<br>top:0;<br>left:0;<br>height:80px;<br>width:80px;<br>background:red;<br>-webkit-transform:rotate (135deg);<br>-moz-transform:rotate (135deg);<br>-ms-transform:rotate (135deg);<br>-o-transform:rotate (135deg);<br>Transform:rotate (135deg);<br>}<p><p>27. Diamond</p></p>#cut-diamond {<br>border-style:solid;<br>Border-color:transparent Transparent Red transparent;<br>border-width:0 25px 25px 25px;<br>height:0;<br>width:50px;<br>position:relative;<br>margin:20px 0 50px 0;<br>}<br>#cut-diamond:after {<br>Content: "";<br>position:absolute;<br>top:25px;<br>Left: -25px;<br>width:0;<br>height:0;<br>border-style:solid;<br>border-color:red Transparent Transparent transparent;<br>border-width:70px 50px 0 50px;<br>}<p><p>28, the yin and yang gossip (domineering this)</p></p><p><p></p></p>#yin-yang {<br>width:96px;<br>height:48px;<br>Background: #eee;<br>border-color:red;<br>border-style:solid;<br>border-width:2px 2px 50px 2px;<br>border-radius:100%;<br>position:relative;<br>}<br>#yin-yang:before {<br>Content: "";<br>position:absolute;<br>top:50%;<br>left:0;<br>Background: #eee;<br>BORDER:18PX Solid red;<br>border-radius:100%;<br>width:12px;<br>height:12px;<br>}<br>#yin-yang:after {<br>Content: "";<br>position:absolute;<br>top:50%;<br>left:50%;<br>background:red;<br>BORDER:18PX Solid #eee;<br>border-radius:100%;<br>width:12px;<br>height:12px;<br>}<p><p>well, That's it, There's 28 of them, and I think the next few are Sharp.</p></p><p><p>Basic graphics for pure CSS (rectangle, circle, triangle, polygon, love, gossip, etc.)</p></p></span>
