css - redondeados - Bordes redondos separados en secciones alrededor de la imagen circular.

imagenes con borde redondeado css

Question

Me pregunto cómo es posible crear el siguiente efecto usando solo CSS:

Salida deseada :

Actualmente, todo lo que puedo pensar es agregar un borde alrededor de la imagen. Pero, ¿cómo puedo cortarlas y hacer secciones de ellas alrededor de la imagen?

Este es mi CSS actual:

.avatar img {
    border-radius: 50%;
    border: solid 3px #65C178;
    border-width: 4px;
}

Y HTML:

<div class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/soffes/128.jpg" /></div>

Vista previa: Ejemplo de JSFiddle

Esto solo proporciona un borde alrededor de la imagen del avatar, no las secciones verdes con espacios blancos.

Answer 1

DEMO

Salida:

Explicación

Creando las fronteras

1. Utilice bordes con radio de borde para crear los bordes.
   paso 1
2. Luego, gire la rotación para que el borde superior izquierdo aparezca en el lugar correcto.
   Paso 2 (no olvides "rotar" la imagen girándola de la otra manera para que permanezca vertical)

Los espacios blancos

3. Use pseudo elementos para crear los espacios blancos en la parte inferior y derecha de la imagen.
   DEMO

A menos que tenga requisitos muy especiales para la compatibilidad con el navegador, puede eliminar los prefijos de proveedor para la propiedad border-radius . Compruebe canIuse para más información.

CSS:

.avatar{
    border: solid 4px #54BE69;
    border-left-color:#D5EDDA;
    padding:2px;
    display:inline-block;  
    border-radius: 50%;
    position:relative;

    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}
.avatar img{
    display:block;
    border-radius: 50%;

    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}
.avatar:before, .avatar:after{
    content:'''';
    position:absolute;
    background:#fff;
    z-index:-1;

    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}
.avatar:before{
    height:4px;
    top:50%;
    left:2px; right:-5px;
    margin-top:-2px;
}
.avatar:after{
    width:4px;
    left:50%;
    top:2px; bottom:-5px;
    margin-left:-2px;
}

Answer 2

Aquí hay una solución: jsfiddle

CSS

.avatar img {
    border-radius: 50%;
    border-width: 4px;
    padding: 4px;
    background-image: linear-gradient(-90deg, #65C178 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(0deg, #65C178 50%, rgba(0, 0, 0, 0) 50%);
}

HTML

<div class="avatar">
    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/soffes/128.jpg" />
</div>

Nota: cambie el valor de deg en el segundo gradiente lineal para cambiar el porcentaje completado.

Answer 3

Aquí tienes un ejemplo con sass .. (rápidamente en Google)

http://codepen.io/geedmo/pen/InFfd

EDITAR: Como se solicita en los comentarios, aquí hay una pequeña mejora con algunos ajustes rápidos a ese código de código

SASS DEMO LINK

HABLAR CON DESCARO A:

// Colors
$progressColor: #65C178
$pendingProgressColor: #D5EDDA
$backColor: #fff

/* -------------------------------------
 * Avatar img
 * ------------------------------------- */
.avatar img
  border-radius: 50%
  border: solid 3px #fff
  border-width: 3px
  margin-top: 4px
  margin-left: 4px

/* -------------------------------------
 * Progress Bar
 * ------------------------------------- */
.progress-radial
  float: left
  margin-right: 30px
  position: relative
  width: 142px
  height: 142px
  border-radius: 50%
  border: 2px solid $backColor // remove gradient color
  background-color: $progressColor // default 100%


/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */

$step: 5 // step of % for created classes

$loops: round(100 / $step)
$increment: 360 / $loops
$half: round($loops / 2)
@for $i from 0 through $loops
  .progress-#{$i*$step}
    @if $i < $half
      $nextdeg: 90deg + ( $increment * $i )
      background-image: linear-gradient(90deg, $pendingProgressColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $progressColor 50%, $pendingProgressColor 50%, $pendingProgressColor)
    @else
      $nextdeg: -90deg + ( $increment * ( $i - $half ) )
      background-image: linear-gradient($nextdeg, $progressColor 50%, transparent 50%, transparent), linear-gradient(270deg, $progressColor 50%, $pendingProgressColor 50%, $pendingProgressColor)

Para el separador de las secciones de progreso se podría incluir otra mezcla.

Answer 4

No podemos obtener exactamente como su imagen. Pero algo podemos conseguirlo. Agregue la siguiente línea de código en su css.

border-top-color:#ff00ff;
border-bottom-color:#0000ff;
border-left-color:#00ff00;
border-right-color:#000;

Jsfiddle actualizado a continuación.

http://jsfiddle.net/vz964/1/