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

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

这仅在头像图像周围给出边框,而不是具有白色间距的绿色部分.

Answer 1

DEMO

输出:

说明

创建边框

1. 使用border-radius边框创建边框.
   步骤1
2. 然后变换旋转以使左上边框出现在正确的位置.
   第2步(不要忘记通过反向旋转图像来"旋转"图像,使其保持垂直)

白色空间

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

上海社会科学院:

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