圆形边框在圆形图像周围分开

Question

我想知道如何仅使用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 Example

这仅给出了头像图像周围的边框，而不是带有白色间距的绿色部分。

Answer 1

DEMO

输出

说明

创建边框

1. 使用border-radius边框创建边框。
   step 1
2. 然后变换旋转以使左上边框出现在正确的位置。
   Step 2（不要忘记＆＃34;取消旋转＆＃34;将图像旋转到另一个所以它保持垂直）

空格

1. 使用伪元素在图像的底部和右侧创建白色间距。
   step 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;
}

Answer 2

这里有一个sass的例子..（快速用Google搜索）

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

Answer 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值以更改填充的百分比。

Answer 4

我们无法像你的形象那样得到。但是我们可以得到它。在你的css中添加以下代码行。

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

更新了以下的jsfiddle。

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