blog/crear-circulo-cuadrado-triangulo-en-css

Crear Circulo, Cuadrado, Triangulo en CSS

Por Yal Publicidad

Publicado el Vie 7 de Settember del 2018 a las 21:57

En este ejemplo veremos como crear figuras geométricas con CSS y HTML

En ésta ocasión realizaremos un tarea simple, pero muy útil en diseño web. Hoy aprenderemos a crear círculos, cuadrados, rectángulos y otras figuras geométricas.

Creamos una carpeta llamada figuras_geometricas y dentro de ella creamos el archivo CSS estilos.css y el HTML index.html

figuras_geometricas
|-- estilos.css
|-- index.html

estilos.css

.circulo {
     width: 150px;
     height: 150px;
     background: #fa4657;
     color:#fff;

     border-radius: 50%;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
}

.cuadrado {
     width: 150px;
     height: 150px;
     background: #fa4657;
}

.triangulo {
     width: 0;
     height: 0;
     border-right: 150px solid transparent;
     border-top: 150px solid transparent;
     border-left: 150px solid transparent;
     border-bottom: 150px solid #fa4657;
}

textarea{
    margin-top: 25px; margin-bottom:25px;
    background:#f4f4f4;
    color:#2424f3;
    max-width:480px; min-width:280px; width: 100%;
    height:200px;
    padding: 15px;
    border:1px solid #ddd;
}

index.html

<html>
<head>
</head>
<body>
<h4>
Círculo en CSS</h4>
<div class="circulo">
</div>
<hr>
<h4>
Cuadrado en CSS</h4>
<div class="cuadrado">
</div>
<hr>
<h4>
Triangulo en CSS</h4>
<div class="triangulo">
</div>
</body>
</html>

Yuri Lizama A.
Yal Publicidad

Deja un comentario:
Buscar
Categorías
Acerca de Nosotros
@yalpublicidad Agencia de publicidad online. 20 años de experiencia en el diseño y desarrollo de imagen e identidad corporativa de tu empresa...