Круглые границы разделены по сечениям вокруг кругового изображения

Мне интересно, как можно создать следующий эффект, используя только CSS:

Требуемый вывод:

В настоящее время я могу только добавить границу вокруг изображения. Но как я могу вырезать их и вырезать из них фрагменты вокруг изображения?

Это мой текущий CSS:

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

И HTML:

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

Предварительный просмотр: Пример JSFiddle

Это дает только границу изображения аватара, а не зеленые секции с белыми расстояниями.

Ответы

Ответ 1

DEMO

Вывод:

Описание

Создание границ

Используйте границы с граничным радиусом для создания границ.
шаг 1
Затем измените поворот, чтобы левая верхняя граница появилась в нужном месте.
Шаг 2 (не забудьте" unrotate "изображение, повернув его другим способом, чтобы он оставался вертикальным)

Белые пробелы

Используйте псевдоэлементы для создания белых расстояний внизу и справа от изображения.
шаг 3

Если у вас нет особых требований к поддержке браузера, вы можете удалить префиксы поставщика для свойства border-radius. Для получения дополнительной информации посетите canIuse.

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

Ответ 2

Здесь у вас есть пример с sass.. (быстро Googled)

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

РЕДАКТИРОВАТЬ: В соответствии с запросом в комментариях здесь небольшое улучшение с некоторыми быстрыми настройками этого кодефа

SASS DEMO LINK

SASS:

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

Для разделителя разделов прогресса может быть включен еще один mixin

Ответ 3

вот решение: 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>

Примечание: измените значение deg во втором линейном градиенте, чтобы изменить заполненный процент.

Ответ 4

Мы не можем получить точный, как ваш образ. Но мы можем это получить. Добавьте следующую строку кода в ваш css.

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

Обновлен jsfiddle ниже.

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