Shulou(Shulou.com)06/01 Report--

This article mainly introduces the CSS how to draw graphics related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this CSS how to draw graphics article, let's take a look at it.

A square / rectangle

W3cschool -, learn programming anytime, anywhere. Square {width:200px; height: 200px; background-color: red;} .rectangle {width:400px; height: 200px; background-color: black; margin-top: 10px } triangle w3cschool -, anytime anywhere to learn programming / * downward triangles, need to be set to border-top:100px solid red; left and left triangles, need to be set to border-right:100px soli red; upper and lower triangles that do not change to right, need to be set to border-left:100px soli red The top and bottom remain the same * / .triangle-up {width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;} oval / circular w3cschool -, learn programming anytime, anywhere. Oval {/ * ellipse * / width: 200px; height: 100px; background: red -moz-border-radius: 100px / 50px;-webkit-border-radius: 100px / 50px; border-radius: 100px / 50px;} .circle {/ * Round * / width: 100px; height: 100px; background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px; border-radius: 50px } parallelogram w3cschool -, learn programming anytime, anywhere. Parallelogram {/ * parallelogram * / width: 150px; height: 100px;-webkit-transform: skew (20deg);-moz-transform: skew (20deg);-o-transform: skew (20deg); background: red; margin-left: 30px Trapezoid w3cschool -, learn programming anytime and anywhere. Trapezoid {/ * trapezoid * / border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px;} this is the end of the article on "how to draw graphics in CSS". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to draw graphics in CSS". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.