Можно ли создать эту форму (два частичных круга, соединенных вместе) с CSS?

Ответ 1

SVG

Это также возможно с помощью SVG.

Версия SVG очень короткая, так как в основном требуется команда Arc для управления ее формой, размером и положением.

<svg width="50%" viewbox="0 0 100 50">
  <path d="M50,35 
           a20,20 0 1,0 0,-20 
           a20,20 0 1,0 0,20z" 
        fill="white" 
        stroke="black">
  </path>
</svg>

Ответ 2

Использование границ: ^{Рекомендуемый}

Вы можете сделать это так же, как и во втором фрагменте, и использовать позиционирование, как в приведенном ниже фрагменте, чтобы избежать перекрытия двух элементов div. Здесь круги создаются псевдоэлементами, а перекрывающаяся часть вырезается с помощью overflow: hidden для их родителей.

Здесь следует отметить, что любой эффект наведения должен быть добавлен к псевдоэлементам, а не к родительским элементам. Это связано с тем, что если :hover привязан к родительскому, то он будет срабатывать даже при падении за пределами круга (поскольку родительский объект по-прежнему является квадратом).

Из всех трех решений, представленных в этом ответе, это тот, который имеет лучшую поддержку браузера и будет работать даже в IE8. Следовательно, это рекомендуется.

.left, .right {
  position: relative;
  float: left;
  height: 200px;
  width: 200px;
  /* border: 1px solid; uncomment to see that they aren't overlapped */
  overflow: hidden;
}
.left:after, .right:after {
  position: absolute;
  content: '';
  height: calc(100% - 12px); /* 12px because of 6px border on either side */
  width: calc(100% - 12px); /* 12px because of 6px border on either side */
  border-radius: 50%;
  border: 6px solid gray;
}
.left:after { right: -20px; }
.right:after { left: -20px; }

<div class='left'></div>
<div class='right'></div>

Ответ 3

Здесь решение, использующее только один <div>.

• .shape - это прозрачный круг с красной рамкой 10px.
• .shape::before - непрозрачный белый круг с красной рамкой 10px.
• .shape::after - непрозрачный белый круг (без границы).

.shape {
margin: 6px auto;
}

.shape, .shape::before, .shape::after {
display: block;
position: relative;
width: 160px;
height: 160px;
border-radius: 160px;
}

.shape, .shape::before {
border: 10px solid #f00;
}

.shape::before, .shape::after {
content: "";
background-color: rgba(255, 255, 255, 1);
}

.shape::before {
top: -10px;
left: -150px;
}

.shape::after {
top: -180px;
}

<div class="shape">
</div>

Ответ 4

Вот быстрый пример, который я придумал. Я не тестировал его в разных браузерах, но он должен быть достаточно хорошо поддержан.

HTML:

<div class="one"></div>
<div class="two"></div>

CSS

div {
  background: #fff;
  border-radius: 50%;
  float: left;
  height: 100px;
  position: relative;
  width: 100px;
}

.one:after,
.two:after{
  /* adjust this to set the border color */
  background: #666;
  border-radius: 50%;
  content: "";
  position: absolute;
  z-index: -1;
  /* adjust these to set the border width */
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}

.two {
  /* adjust this to set the overlap of the circles */
  margin-left: -20px;
}

Live Demo

Ответ 5

Я возвращаюсь к этому вопросу (через 6 недель), потому что голос с наивысшим голосом вызвал мое академическое любопытство в svg, которое я редко встречал и никогда не учился.

Так как я изучаю svg, этот вопрос (который отправил меня в мой поиск, чтобы узнать его в первую очередь) представлял собой идеальный вызов, с помощью которого можно было попробовать новые навыки.

Итак, вот альтернативное решение svg, эквивалентное моему единственному решению <div> css выше:

svg {
width: 310px;
height: 180px;
}

svg circle {
stroke: rgb(255,0,0);
stroke-width: 10;
fill: rgb(255,255,255);
}

svg circle:nth-of-type(3) {
stroke: rgb(255,255,255);
}

<svg viewbox="0 0 310 180">
<circle cx="90" cy="90" r="80" />
<circle cx="220" cy="90" r="80" />
<circle cx="90" cy="90" r="70" />
</svg>