Código de CSS - Dibujar una flecha con html y css

Imágen de perfil

Dibujar una flecha con html y cssgráfica de visualizaciones


CSS

Publicado el 21 de Julio del 2015 por xve
3.164 visualizaciones desde el 21 de Julio del 2015. Una media de 49 por semana
Este código muestra como dibujar una flecha hacia la derecha, izquierda, abajo y arriba con HTML y CSS3 sin utilizar ninguna imagen.

flechas-html-css

Versión 1.0

Publicado el 21 de Julio del 2015gráfica de visualizaciones de la versión: Versión 1.0
3.165 visualizaciones desde el 21 de Julio del 2015. Una media de 49 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE HTML>
<html>
<head>
	<style>
		.triangulo {
			border-style: solid;
			border-width: 21px;
			width: 0;
			height: 0;
		}
		.triangulo>div {
			border-style: solid;
			border-width: 10px;
			width: 0;
			height: 0;
			position:relative;
		}
 
		.triangulo.right {
			border-color: transparent transparent transparent black;
		}
		.triangulo.right>div {
			border-color: transparent transparent transparent white;
			top:-10px;
			left:-21px;
		}
		.triangulo.left {
			border-color: transparent black transparent transparent;
		}
		.triangulo.left>div {
			border-color: transparent white transparent transparent;
			top:-10px;
			left:1px;
		}
		.triangulo.up {
			border-color: black transparent transparent transparent;
		}
		.triangulo.up>div {
			border-color: white transparent transparent transparent;
			top:-21px;
			left:-10px;
		}
		.triangulo.down {
			border-color: transparent transparent black transparent;
		}
		.triangulo.down>div {
			border-color: transparent transparent white transparent;
			top:1px;
			left:-10px;
		}
	</style>
</head>
 
<body>
 
<div class="triangulo right">
	<div></div>
</div>
<br>
<div class="triangulo left">
	<div></div>
</div>
<br>
<div class="triangulo up">
	<div></div>
</div>
<br>
<div class="triangulo down">
	<div></div>
</div>
 
 
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (0)


No hay comentarios
 

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3221