Me pregunto si hay una manera más fácil para crear circular divs que lo que estoy haciendo ahora.

Actualmente, apenas estoy haciendo una imagen para cada tamaño diferente, pero es molesto hacer esto.

Es de todos modos el uso de CSS para hacer divs que son circulares y puedo especificar el radio?

  • ¿Qué navegadores se debe esta ser admitidos en?
  • Mira mi respuesta a esta pregunta relacionada, en particular las demos: stackoverflow.com/questions/4451350/…
  • También puede utilizar SVG(VML) para hacer un círculo.
  • ¿Por qué no puede cambiar el tamaño de la imagen de la anchura y la altura en lugar de hacer de diferentes tamaños? ¿Qué tan grandes son estas imágenes?
InformationsquelleAutor bmaster | 2011-01-30

13 Comentarios

  1. 288

    Aquí una demo: 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 hacer este trabajo en IE8 y mayores, debe descargar y utilizar CSS3 PASTEL. Mi demo de arriba no funciona en IE8, pero eso es sólo porque jsFiddle no host PIE.htc.

    Mi demo se parece a esto:

    Manera más fácil de crear círculo de div que el uso de una imagen?

    • No puedo hacer div circular en chrome.Funciona en Mozilla pero..Mi url es chokate.maninactionscript.com/chokates haga clic en el desierto de la imagen o el anterior, para que el div se muestra en el zoom de la imagen no es circular..que es en mozilla.
    • El div en su página de es ronda, en la que se puede ver si usted agregar por ejemplo border: 5px solid red a ella. El problema es que las partes de la imagen que «sobresalen por el círculo» no se ocultan. Ninguna de las habituales soluciones son especialmente fáciles de aplicar aquí.. me sugieren el uso de la -webkit-mask-image propiedad de fijar los navegadores WebKit (y mantener border-radius, para otros navegadores). Más info aquí: webkit.org/blog/181/css-masks. Usted también podría considerar la posibilidad de formular una pregunta aquí en Stack Overflow, a ver si alguien tiene otras ideas.
    • ¿Cómo puedo aplicar aquí?
    • También puedes hacer 100% en lugar de 999px.
    • .htc no está soportado.
    • Me pregunto cómo alinear objetos (botones) dentro de una ronda div! 😀
    • Se trata sólo de mí, o no podemos poner redimensionar: ambos;

  2. 24

    Configuración de la border-radius de cada lado de un elemento a un 50% va a crear el círculo de la pantalla a cualquier tamaño:

    .circle {
      border-radius: 50%;
      width: 200px;
      height: 200px; 
      /* width and height can be anything, as long as they're equal */
    }
    • Este es probablemente el método que debe utilizarse ahora (en 2017).
  3. 13

    Probar este

    .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;
       }
  4. 6

    Es realmente posible.

    Ver: CSS Tip: Cómo Hacer Círculos Sin Imágenes. Ver demo.

    Pero se advirtió, tiene serias desventajas en términos de compatibilidad, básicamente, usted está haciendo un gato de la corteza.

    Ver aquí

    Como verá usted sólo tiene que configurar el height y width a la mitad de la border-radius

    Buena suerte!

    • Hola, gracias por tu jsfiddle enlace! Este enlace es el único trabajo de su respuesta por ahora. 😉
  5. 3

    Hay también [la mala idea de] utilizando varios (20+) horizontal o vertical 1px divs para la construcción de un círculo. Este plugin jQuery utiliza este método para la construcción de diferentes formas.

  6. 3

    Dar el ancho y la altura en función del tamaño, pero,mantener la igualdad de

    CSS:

    .circle {
      background-color: gray;
      height: 400px;
      width: 400px;
      border-radius: 100%;
    }

    HTML:

    <div class="circle">
    </div>

    • border-radius: 50%; es suficiente.
  7. 3

    CSS:

    .fa-circle{
      color: tomato;
    }
    
    div{
      font-size: 100px;
    }

    HTML:

    <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>

    Sólo quería mencionar otra solución que responde a la pregunta de «manera más Fácil de crear círculo de div que el uso de una imagen?», que es el uso de FontAwesome.

    Importar el fontawesome archivo css o de la CDN aquí

    y, a continuación, simplemente:

    <div><i class="fa fa-circle" aria-hidden="true"></i></div>

    y que se le puede dar cualquier color que usted desee a cualquier tamaño de fuente.

  8. 1

    Puede utilizar la radio pero no va a funcionar en IE: border-radius: 5px 5px;.

    • border-radius: 5px; ahora funciona en IE9+ también.
  9. 1

    Usted puede probar el radial-gradient CSS función:

    .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 un div capa:

    <div class="circle"></div>
  10. 1

    Digamos que usted tiene esta imagen:

    Manera más fácil de crear círculo de div que el uso de una imagen?

    para hacer un círculo a cabo este proceso, usted sólo tiene que añadir

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

    Así que si tienes un div que usted puede hacer la misma cosa.

    Ver el ejemplo a continuación:

    CSS:

    .circle {
      border-radius: 50%;
      width: 100px;
      height: 100px; 
      animation: stackoverflow-example infinite 20s linear;
      pointer-events: none;
    }
    
    @keyframes stackoverflow-example {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    HTML:

    <div>
      <img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
    </div>

  11. 0

    básicamente se utiliza div con posición absoluta para colocar a un personaje en las coordenadas. entonces, utilizando la ecuación paramétrica de un círculo, se puede dibujar un círculo. si usted fuera a cambio de div en la posición relativa, que va a resultar en una onda sinusoidal…

    que en esencia somos la graficación de ecuaciones por el abuso de la posición de la propiedad. no estoy versado bien en css, por lo que alguien que sin duda puede hacer que esto sea más elegante. disfrutar.

    esto funciona en todos los navegadores y dispositivos móviles (que yo sepa). yo 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í: http://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>
  12. -1

    Para el círculo, crear un div elemento y, a continuación, introduzca la anchura = 2 veces de la frontera radio = 2 veces el relleno. También la línea-altura = 0
    Por ejemplo, con 50px como los radios de un círculo, el siguiente código funciona bien:

    width: 100px;
    padding: 50px 0;
    border: solid;
    line-height: 0px;
    border-radius: 50px;

Dejar respuesta

Please enter your comment!
Please enter your name here