Cómo crear y utilizar CSS triángulo?

CSS Triángulo : Aquí, vamos a aprender cómo crear un uso triángulos en CSS (Cascading Style Sheet)?

Introducción:

Podemos hacer tanto en el desarrollo web que hace que todo sea simplemente interesante. Puede estilo de sus sitios web o páginas web, en cualquier forma que desee. Puede añadir animaciones a sus sitios web o páginas web y mucho más. El caso es que el estilo es muy importante el desarrollo class web a medida que completa su sitio web o una página web en su totalidad. En for usted no ha labrado su sitio web o una página web adecuadamente, entonces nadie le gustaría echar un vistazo a su sitio web o una página web y todos sus esfuerzos y el trabajo duro será en vano. Por lo tanto, practicar el estilo de su sitio web o página web como todo lo que pueda. Puede probar diferentes tipos de plantillas o disposiciones y no hay mucho más, todo lo que tiene que hacer es explorar.

Formas:

Desde la charla tiene que ver con el estilo, ¿por qué no tomamos esta discusión un poco más allá y hablan de formas en CSS ? Has leído bien, con la ayuda de CSS podemos hacer tantas formas como queremos. Desde el triángulo de cuadrar a un rectángulo y muchos más. Todo lo que necesita hacer es configurar el tamaño y forma con las mediciones precisas y usted será capaz de crear diversas formas con sólo hacer uso de CSS.

En este artículo, vamos a aprender acerca de una forma particular, que es un triángulo . Vamos a aprender cómo podemos crear triángulos con la ayuda de CSS ? Por lo tanto, sigue leyendo porque las cosas se van a poner interesante.

Método:

La creación de un triángulo usando CSS no es muy fácil como parece. Hay un truco muy aseado para hacer eso. La idea básica detrás de la creación de un triángulo es la primera imaginar una caja transparente con bordes en todos los lados. Imaginemos ahora que las fronteras se reúnen entre sí en cada extremo. Ahora lo que hay que hacer es configurar el ancho y la altura de esta caja de texto como 0 y hacer que el borde derecho, borde izquierdo y el borde inferior es transparente. Después de hacer esto, todo lo que sería visible en el borde superior en la forma de un triángulo y hay que ir, que es como se crea un triángulo ?

Bueno, sí que podría parecer confuso al principio, pero con la ayuda de un ejemplo, usted será capaz de hacerlo en ningún momento. Así que adelante y probarlo ustedes mismos y cada vez que usted se encuentra en duda, siempre se puede volver al artículo.

Sintaxis:

Element {
width: 0;
height: 0;
border-left: value px solid transparent;
border-right: value px solid transparent;
border-bottom: value px solid color;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 0;
height: 0;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 200px solid #f40;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

salida

How to create and use CSS triangle? - 4

En el ejemplo anterior, cambiar los valores de las fronteras y cambiar el tamaño de triángulo.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *