En este artículo, vamos a aprender cómo usar las propiedades CSS para crear una forma triangular. Normalmente no existe una técnica directa para crear un triángulo usando CSS.
Enfoque: para crear el triángulo, en la parte HTML solo tenemos que agregar un solo div para cada triángulo. El concepto es crear una caja sin ancho ni alto. El ancho del borde determina el ancho y la altura reales del Triángulo. El borde inferior de un triángulo con una flecha hacia arriba, por ejemplo, está coloreado, mientras que los bordes izquierdo y derecho son transparentes y forman un triángulo. Para hacer triángulos con flecha hacia abajo, flecha hacia la izquierda y flecha hacia la derecha, debemos mantener el borde superior, el borde derecho y el borde izquierdo coloreados respectivamente.
Propiedad usada (función principal):
- border-top : esta propiedad CSS se usa para agregar un borde en la parte superior de un elemento, toma el valor del ancho del borde y el color del borde.
- border-left : Esta propiedad CSS se usa para agregar un borde en el lado izquierdo de un elemento, toma el valor del ancho del borde y el color del borde.
- border-right : Esta propiedad CSS se usa para agregar un borde en el lado derecho de un elemento, toma el valor del ancho del borde y el color del borde.
- border-bottom : esta propiedad CSS se usa para agregar un borde en la parte inferior de un elemento, toma el valor del ancho del borde y el color del borde.
El siguiente ejemplo demuestra el enfoque anterior.
Ejemplo 1: En el siguiente código , la propiedad border-bottom se usa para hacer un triángulo con una flecha hacia arriba .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1{
color: green;
margin: 2rem;
}
h3{
margin: 2.2rem;
margin-top: -2rem;
}
.up-arrow {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid green;
margin: 2rem;
}
</style>
<title>How do CSS triangles work?</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>How do CSS triangles work?</h3>
<div class="up-arrow"></div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente código , la propiedad border-top se usa para hacer un triángulo con una flecha hacia abajo .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1{
color: green;
margin: 2rem;
}
h3{
margin: 2.2rem;
margin-top: -2rem;
}
.down-arrow {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid green;
margin: 2rem;
}
</style>
<title>How do CSS triangles work?</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>How do CSS triangles work?</h3>
<div class="down-arrow"></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA