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:
.square {
background: #b5edc2;
width: 100px;
height: 100px;
}
.rectangle {
width: 150px;
height: 100px;
background: #b5edc2;
}
.circle {
background: #b5edc2;
border-radius: 50%;
height: 100px;
width: 100px;
}
.triangle {
border-width: 0 60px 100px 60px;
border-style: solid;
border-color: transparent transparent #b5edc2 transparent;
width: 0px;
height: 0px;
}
Practical examples
Example 1
In this example, we create four basic geometric figures:
- square
- rectangle
- circle
- triangle
// ONLINE-RUNNER:browser;
<!DOCTYPE>
<html>
<head>
<style>
* {
margin: 10px;
}
.square {
background: #b5edc2;
width: 100px;
height: 100px;
}
.rectangle {
width: 150px;
height: 100px;
background: #b5edc2;
}
.circle {
background: #b5edc2;
border-radius: 50%;
height: 100px;
width: 100px;
}
.triangle {
border-width: 0 60px 100px 60px;
border-style: solid;
border-color: transparent transparent #b5edc2 transparent;
width: 0px;
height: 0px;
}
</style>
</head>
<body style="display: flex">
<div class="square"></div>
<div class="rectangle"></div>
<div class="circle"></div>
<div class="triangle"></div>
</body>
</html>
Example 2
// ONLINE-RUNNER:browser;
<!DOCTYPE>
<html>
<head>
<style>
* {
margin: 10px;
}
.square {
border: 2px solid #3085d6;
border-radius: 20px;
background: #cce1f5;
width: 100px;
height: 100px;
}
.circle {
border: 2px solid #3085d6;
border-radius: 50%;
background: #cce1f5;
width: 100px;
height: 100px;
}
</style>
</head>
<body style="display: flex">
<div class="square"></div>
<div class="circle"></div>
</body>
</html>