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/