CSS一侧切割带边框的圆形图像答案

【问题标题】：CSS one side cut circle image with borderCSS一侧切割带边框的圆形图像
【发布时间】：2016-12-26 17:48:17
【问题描述】：

如何制作以下形状带彩色边框：

我的第一次尝试是纯 CSS，但附加的代码更像是蛋形而不是圆形：

img {
    border: 2px #ff00ff solid;
    border-top-left-radius: 60% 50%;
    border-bottom-left-radius: 60% 50%;
    border-top-right-radius: 50% 20%;
    border-bottom-right-radius:50% 20%;
}

&lt;img  src="https://d1wn0q81ehzw6k.cloudfront.net/additional/thul/media/4e34feee0acdc38a?w=400&amp;h=400" style="width:100%"&gt;

第二次尝试，Opera 和 IE 不支持使用 SVG，我不知道如何制作边框。 “削减”并非每次都有效。

img {
    clip-path: url(#myClip);
}

<svg width="120" height="120"
     viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

    <defs>
        <clipPath id="myClip">
            <circle cx="260" cy="256" r="256" style="fill:none;stroke:#00df0b;stroke-width:6"/>

        </clipPath>
    </defs>
</svg>
<img src="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg" style="width:100%">

【问题讨论】：

The Shapes of CSS 展示了一些可以用纯 CSS 制作的惊人形状，例如facebook icon（以及使用此技术的@jbutler483 答案）
How do I draw an incomplete circle with CSS and in it how to put a picture?的可能重复

标签： html css svg css-shapes

【解决方案1】：

最简单的解决方案可能就是制作一个 SVG。

<svg width="400px" height="400px" viewBox="0 0 1 1"
     overflow="visible">
  <defs>
    <mask id="myMask" x="0" y="0" width="1" height="1"
          maskContentUnits="objectBoundingBox" fill="white">
      <path id="myPath" d="M 0.8 0.9 L 0.8 0.1 A 0.5 0.5 0 1 0 0.8 0.9 Z"/>
    </mask>
  </defs>
  <image xlink:href="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg"
         x="0" y="0" width="1" height="1" mask="url(#myMask)"/>
  <use xlink:href="#myPath" fill="none" stroke="#f0f" stroke-width="0.01"/>
</svg>

【讨论】：

太棒了！但是......不幸的是，Opera和IE不支持。明天当我尝试您的建议时，我会提供进一步的反馈:) 更新：效果很好，非常感谢！
@MatzunaTata Opera 和 IE 都支持这一点，除非你需要支持一个非常老的、过时且使用危险的 IE 版本。

【解决方案2】：

你可以使用一个伪元素来创建这样的东西：

div {
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s;
}
div:hover {
  height: 500px;
  width: 500px;
}
div:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 15%;
  height: 100%;
  width: 100%;
  background: url(http://lorempixel.com/300/300);
  background-size: 100% 100%;
  border-radius: 50%;
  border: 10px solid tomato;
}
div:after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  background: tomato;
  width: 10px;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：