EN
HTML / CSS - simple geometric figures
0 points
In this article, we would like to show you how to create simple geometric figures in HTML / CSS.
Quick solution:
xxxxxxxxxx1
.square {2
background: #b5edc2;3
width: 100px;4
height: 100px;5
}6
7
.rectangle {8
width: 150px;9
height: 100px;10
background: #b5edc2;11
}12
13
.circle {14
background: #b5edc2;15
border-radius: 50%;16
height: 100px;17
width: 100px;18
}19
20
.triangle {21
border-width: 0 60px 100px 60px;22
border-style: solid;23
border-color: transparent transparent #b5edc2 transparent;24
width: 0px;25
height: 0px;26
}In this example, we create four basic geometric figures:
- square
- rectangle
- circle
- triangle
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
* {7
margin: 10px;8
}9
10
.square {11
background: #b5edc2;12
width: 100px;13
height: 100px;14
}15
16
.rectangle {17
width: 150px;18
height: 100px;19
background: #b5edc2;20
}21
22
.circle {23
background: #b5edc2;24
border-radius: 50%;25
height: 100px;26
width: 100px;27
}28
29
.triangle {30
border-width: 0 60px 100px 60px;31
border-style: solid;32
border-color: transparent transparent #b5edc2 transparent;33
width: 0px;34
height: 0px;35
}36
37
</style>38
</head>39
<body style="display: flex">40
<div class="square"></div>41
<div class="rectangle"></div>42
<div class="circle"></div>43
<div class="triangle"></div>44
</body>45
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
* {7
margin: 10px;8
}9
10
.square {11
border: 2px solid #3085d6;12
border-radius: 20px;13
background: #cce1f5;14
width: 100px;15
height: 100px;16
}17
18
.circle {19
border: 2px solid #3085d6;20
border-radius: 50%;21
background: #cce1f5;22
width: 100px;23
height: 100px;24
}25
26
</style>27
</head>28
<body style="display: flex">29
<div class="square"></div>30
<div class="circle"></div>31
</body>32
</html>