Un trapecio es un cuadrilátero que tiene dos lados paralelos y dos no paralelos. En este artículo, crearemos una forma de trapecio utilizando HTML y CSS simples.
Código HTML: en esta sección, crearemos un elemento simple usando la etiqueta HTML div .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Trapezium</title> </head> <body> <div class="trapezium"></div> </body> </html>
Código CSS: en esta sección, primero diseñaremos el elemento div usando algunas propiedades básicas de CSS y luego usaremos las propiedades border-bottom, border-left y border-right para crear la forma de trapecio.
css
<style>
/* creating the trapezium shape*/
.trapezium {
height: 0;
width: 150px;
border-bottom: 150px solid green;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
</style>
Código final: es la combinación de las dos secciones de código anteriores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Trapezium</title>
<style>
/* Creating the trapezium shape*/
.trapezium {
height: 0;
width: 150px;
border-bottom: 150px solid green;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
</style>
</head>
<body>
<div class="trapezium"></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA