仅在一侧围绕css圆圈添加白色轮廓

Question

提前感谢您的阅读。

我不确定如何解释我的问题，但我会首先链接一些图片以便您有一个想法，之后我会进一步解释并添加一些代码。

我有这个：What I have
我想要的是：What I want

我将为我的圈子及其容器提供 CSS ：

.circle-container {
    width: 68%;
    height: 100%;
    float: left;
    background: url(img.jpg);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;   
    box-sizing: border-box;
    padding-right: 100px;
}
.circle {
    float:left;
    height:100%;
    width:33%;
    border: #A93932 solid 4px;
    border-radius:50%;
    background-color:rgb(227,5,19);
    background-color:rgba(227,5,19,0.8);
}

显然上面的 CSS 没有使它成为一个圆圈，请看下面的脚本我是怎么做到的：

让圈子响应的脚本：

$(window).resize(function() {
    $('.circle').css('height', $('.circle').width());
    if($('.circle').height() > $(window).height())
    {
        $('.circle').css('height', $(window).height());
        $('.circle').css('width', $(window).height());
    }
});

$(document).ready(function() {
    $('.circle').css('height', $('.circle').width());
    if($('.circle').height() > $(window).height())
    {
        $('.circle').css('height', $(window).height());
        $('.circle').css('width', $(window).height());
    }
});

如果还有 CSS 或者需要HTML，我希望听到它！

谢谢！

Answer 1

到.circle-container，调整border-radius属性

因此，您的代码应如下所示：

.circle-container{
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

希望有所帮助：）

编辑：这是jsFiddle demo

Answer 2

我尝试使用伪元素找到解决方案，但使用了background-image属性的两倍。

看起来像：

这方面的一个例子是：

body {
  background: url(http://geocarrefour.revues.org/docannexe/image/842/img-1-small580.png) no-repeat;
}
.inner-bg {
  background: url(http://geocarrefour.revues.org/docannexe/image/842/img-1-small580.png) no-repeat;
  height: 425px;
  width: 380px;
  border-radius: 50%;
  margin: auto;
  margin-top: 10px;
}
div.wrap {
  height: 425px;
  width: 400px;
  border-radius: 50%;
}
div.inner {
  background: rgba(255, 255, 255, .5);
  height: 405px;
  width: 380px;
  border-radius: 50%;
  margin: auto;
}
div.inner:after {
  content: "";
  background: white;
  opacity: 0.5;
  top: 20px;
  left: 15px;
  bottom: 0;
  width: 250px;
  right: 0;
  height: 425px;
  width: 380px;
  border-radius: 50%;
  position: absolute;
  z-index: 5;
}
div.wrap:after {
  content: "";
  background: red;
  height: 425px;
  top: 0;
  left: 0;
  bottom: 0;
  width: 180px;
  right: 0;
  position: absolute;
  z-index: -1;
}

<div class="wrap">
  <div class="inner">
    <div class="inner-bg"></div>
  </div>

希望这有帮助！