CSS painting of several basic graphics. (With source code)
May 29, 2021 Article blog
Table of contents
CSS refers to cascading style sheets that control the style and layout of the entire site, and CSS plays an absolute role in the layout of the entire page. S o today W3Cschool teaches you a few basic graphics of CSS painting. The following comes with the source code, students can learn to do their own exercises, strengthen memory.
Square/rectangle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>w3cschool - 编程狮，随时随地学编程</title>
<style>
.Square{
width:200px;
height: 200px;
background-color: red;
}
.Rectangle{
width:400px;
height: 200px;
background-color: black;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="Square"></div>
<div class="Rectangle"></div>
</body>
</html>
The end result is:
_1618154392.5251424.webp)
triangle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>w3cschool - 编程狮，随时随地学编程</title>
<style>
/*向下的三角形，则需要设置为border-top：100px solid red;左右边不变
向左的三角形，则需要设置为border-right：100px soli red;上下边不变
向右的三角形，则需要设置为border-left：100px soli red;上下边不变*/
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style>
</head>
<body>
<div class="triangle-up"></div>
</body>
</html>The end result is:
_1618154394.1661298.webp)
Oval/circular
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>w3cschool - 编程狮，随时随地学编程</title>
<style>
.oval {/*椭圆*/
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
.circle {/*圆形*/
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="oval"></div>
<div class="circle"></div>
</body>
</html>The end result is:
_1618154395.0124269.webp)
parallelogram
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>w3cschool - 编程狮，随时随地学编程</title>
<style>
.parallelogram {/*平行四边形*/
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
margin-left: 30px;
}
</style>
</head>
<body>
<div class="parallelogram"></div>
</body>
</html>The end result is:
_1618154395.9817429.webp)
trapezium
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>w3cschool - 编程狮，随时随地学编程</title>
<style>
.trapezoid {/*梯形*/
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
</style>
</head>
<body>
<div class="trapezoid"></div>
</body>
</html>The end result is:
_1618154396.8039389.webp)
These are the CSS drawings of several basic graphics. Y ou can practice according to the source code, you can also play their own, draw their own graphics. More CSS learning can be done by referring to the CSS tutorial.