Formas básicas de CSS

aprender: Cómo crear formas básicas como el círculo, rectángulo, triángulo, cuadrado usando la hoja de estilo en cascada (CSS) ?

La cara de la página web, CSS (Cascading Style Sheets) es un ingrediente importante de la página web moderna. La última versión, ofertas CSS3 gama de características class diseñadores que les permite crear sitios web visualmente pendientes.

El CSS no sólo hace que su web páginas bueno, pero también puede ayudar a salvar su ancho de banda del servidor en la representación de formas básicas de todo por el navegador del cliente. Son fáciles de código y rápido, ya que el navegador del cliente hace que el código con el estilo de documento de una sola vez.

Aquí la imagen de algunas formas básicas que vamos a crear a través de la CSS:

Basic Shapes in CSS - 4

Aquí está el código for unas pocas formas básicas que forma la raíz de las formas avanzadas y complejas.

1) CSS class Plaza

.square {
width: 100px;
height: 100px;
background: #f56;
}

bastante fácil y sencillo, definir la altura igual y aplicar un fondo. Hay que ir, con una bonita caja cuadrada.

2) CSS for rectángulo

.rectangle {
width: 200px;
height: 100px;
background: #f56;
}

creo que no es difícil pensar por qué limitaciones se diferencia de la plaza. Sí, anchura y altura desigual son la respuesta correcta.

3) CSS for Circle

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #f56;
}

Un círculo es un cuadrado, pero con esquinas redondeadas. El círculo código for es similar al punto de partida, pero con una propiedad adicional añadido llama la frontera de radio .

4) CSS for Triángulo

.triangle {
width: 0px;
height: 0px;
border: 20px solid transparent;
border-bottom-color: #f56;
}

Creación de triángulo puede ser complicado, pero una vez que entienda esto, se puede decir que eres un experto en CSS.

for un triángulo, asignar el ancho de y altura a 0. Esto se debe a que vamos a utilizar solamente las fronteras. A continuación, aplicar la propiedad frontera, digamos, 20px sólido transparente . ¿Por qué le preguntas transparente, simplemente porque queremos ocultar la otra orilla y utilizar sólo una frontera.

A continuación, aplicar esta propiedad border-bottom-color: # ff5566 y lo que queda es un triángulo pequeño y lindo en su pantalla.

código HTML completo con el CSS para mostrar formas básicas

<!DOCTYPE html>
<html>
<head>
<title>Basic CSS Shapes</title>
<style type="text/css">
div {
margin: 20px auto;
}
.square {
width: 100px;
height: 100px;
background: #2ecc71;
}
.rectangle {
width: 200px;
height: 100px;
background: #9b59b6;
}
.circle {
width: 100px;
height: 100px;
background: #2980b9;
border-radius: 50%;
}
.triangle {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: #e74c3c;
margin-top: -80px;
}
</style>
</head>
<body>
<div class="square"></div>
<div class="rectangle"></div>
<div class="circle"></div>
<div class="triangle"></div>
</body>
</html>

DEMO


Deja un comentario

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