mostrar - insertar imagen html url
¿Una forma más fácil de crear un círculo div que usar una imagen? (11)
Me pregunto si existe una manera más fácil de crear divisiones circulares de lo que estoy haciendo ahora.
Actualmente, solo estoy haciendo una imagen para cada tamaño diferente, pero es molesto hacer esto.
¿Hay alguna forma de usar CSS para hacer divs que sean circulares y puedo especificar el radio?
Agregar la propiedad css de:
border-radius: 50%;
a cualquier div lo hace circular.
Aquí hay una demostración: http://jsfiddle.net/thirtydot/JJytE/1170/
CSS:
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don''t care about IE8 */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
}
.type3 {
width: 500px;
height: 500px;
background: aqua;
border: 30px solid blue;
}
HTML:
<div class="circleBase type1"></div>
<div class="circleBase type2"></div><div class="circleBase type2"></div>
<div class="circleBase type3"></div>
Para que esto funcione en IE8 y anteriores , debe descargar y usar CSS3 PIE . Mi demostración anterior no funcionará en IE8, pero eso es solo porque jsFiddle no aloja PIE.htc .
Mi demo se ve así:
Básicamente, esto usa la posición absoluta de div para colocar un personaje en las coordenadas dadas. entonces, usando la ecuación paramétrica para un círculo, puedes dibujar un círculo. si cambiaras la posición de div a relativa, daría como resultado una onda sinusoidal ...
en esencia estamos graficando ecuaciones abusando de la propiedad de posición. No soy muy versado en CSS, por lo que seguramente alguien puede hacerlo más elegante. disfrutar.
esto funciona en todos los navegadores y dispositivos móviles (que yo sepa). Lo uso en mi propio sitio web para dibujar ondas sinusoidales de texto (www.cpixel.com). la fuente original de este código se encuentra aquí: www.mathopenref.com/coordcirclealgorithm.html
<html>
<head></head>
<body>
<script language="Javascript">
var x_center = 50; //0 in both x_center and y_center will place the center
var y_center = 50; // at the top left of the browser
var resolution_step = 360; //how many times to stop along the circle to plot your character.
var radius = 50; //how big ya want your circle?
var plot_character = "·"; //could use any character here, try letters/words for cool effects
var div_top_offset=10;
var div_left_offset=10;
var x,y;
for ( var angle_theta = 0; angle_theta < 2 * Math.PI; angle_theta += 2 * Math.PI/resolution_step ){
x = x_center + radius * Math.cos(angle_theta);
y = y_center - radius * Math.sin(angle_theta);
document.write("<div style=''position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "''>" + plot_character + "</div>");
}
</script>
</body>
</html>
En realidad es posible.
Ver: Sugerencia CSS: Cómo hacer círculos sin imágenes . Ver demo
Pero ten cuidado, tiene serias desventajas en términos de compatibilidad, básicamente, estás haciendo ladridos de gato.
Véalo trabajando here
Como verá, solo tiene que configurar la height y el width a la mitad del border-radius del border-radius
¡Buena suerte!
Establecer el radio del borde de cada lado de un elemento al 50% creará la visualización del círculo en cualquier tamaño:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they''re equal */
}
Proporcione ancho y alto según el tamaño, pero mantenga ambos iguales
.circle {
background-color: gray;
height: 400px;
width: 400px;
border-radius: 100%;
}
<div class="circle">
</div>
Prueba esto
.iphonebadge {
border-radius:99px;
-moz-border-radius:99px;
-webkit-border-radius:99px;
background:red;
color:#fff;
border:3px #fff solid;
background-color: #e7676d;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
background-image: linear-gradient(top, #e7676d, #b7070a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=''#e7676d'', EndColorStr=''#b7070a'');
-webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
-moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
display:inline-block;
padding:2px 2px 2px 2px ;
margin:3px;
font-family:arial;
font-weight:bold;
}
Puede usar el radio, pero no funcionará en IE: border-radius: 5px 5px; .
Puedes probar la función CSS de radial-gradient :
.circle {
width: 500px;
height: 500px;
border-radius: 50%;
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
Aplicarlo a una capa div :
<div class="circle"></div>
También hay [la mala idea de] usar varios (20+) divisores de 1px horizontales o verticales para construir un círculo. Este complemento jQuery usa este método para construir diferentes formas.
.fa-circle{
color: tomato;
}
div{
font-size: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
Solo quería mencionar otra solución que responde a la pregunta "¿Es más fácil crear un círculo div que usar una imagen?" que es usar FontAwesome.
Usted importa el archivo fontawesome css o desde el CDN here
y luego tú solo:
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
y puedes darle cualquier color que quieras a cualquier tamaño de letra.