En este artículo, diseñaremos algunos tipos diferentes de formas usando CSS. CSS es capaz de hacer todo tipo de formas.
- Creando un cuadrado:
html
<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
<head>
<style>
.square {
height: 50px;
width: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
Producción:
- Creando Triángulo
- Hacia arriba:
- Hacia arriba:
html
<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
Producción:
- Hacia abajo:
html
<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid green;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
Producción:
- Crear un círculo:
html
<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
height: 70px;
width: 70px;
background-color: green;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
Producción:
- Creando un rectángulo:
html
<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
height: 50px;
width: 80px;
background-color: green;
}
</style>
</head>
<body>
<div class="rectangle"></div>
</body>
</html>
Producción:
- Creando un paralelogramo:
html
<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
<head>
<style>
.parallelogram {
width: 120px;
height: 60px;
transform: skew(24deg);
background: green;
}
</style>
</head>
<body>
<div class="parallelogram"></div>
</body>
</html>
- Producción:
- Creando óvalo:
HTML
<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
<head>
<style>
.oval {
height: 200px;
width: 400px;
border-radius: 50%;
background-color: green;
}
</style>
</head>
<body>
<div class="oval"></div>
</body>
</html>
- Producción:
