3

Я ищу способ нарисовать нижнюю часть этого круга с помощью CSS или SVG.

Мне нужно сделать дополнительный сегмент чуть меньше половины окружности.
Это, вероятно, невозможно реализовать на чистом CSS, но SVG-решение сложно для меня.

Ниже на картинке, что я хочу получить.

введите сюда описание изображения

Вот мой код:

<svg class="pie">
  <circle cx="115" cy="115" r="110"></circle>
  <path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path>
</svg>   

Перевод вопроса: Draw half circle with CSS or SVG @parliament

2
  • 1
    ассоциация:stackoverflow.com/questions/27682973/… 24 мар 2017 в 20:49
  • Вопрос и ответ может показаться слишком простым для ruSO. Но я выбрал его, потому что видел и вижу, как часто задается этот вопрос в сети, поэтому счёл полезным добавить его в русскоязычную базу данных. 24 мар 2017 в 20:52

4 ответа 4

4

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

div {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-image: linear-gradient(orange 65%, darkorange 65%);
  border-radius: 100%;
}

div:nth-child(2) {
  background-image: linear-gradient(transparent 65%, darkorange 65%);
}

div:nth-child(3) {
  background-image: linear-gradient(orange 65%, transparent 65%);
}

div:nth-child(4) {
  transform: translateY(-65%);
  background-image: linear-gradient(transparent 65%, darkorange 65%);
}
<div></div>
<div></div>
<div></div>
<div></div>

1
  • всегда только приветствую активность в решении одного вопроса разными способами. Благодарю + 24 мар 2017 в 20:59
3

Самый лёгкий способ на SVG

* {
  margin: 0;
}

svg {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid red;
  margin: 0 30px;
}
<svg width="120px" height="50px">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg width="120px" height="50px">
<circle cx="50" cy="0" r="50"/>
</svg>
<svg width="50px" height="120px">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg width="50px" height="120px">
<circle cx="0" cy="50" r="50"/>
</svg>
<svg   viewBox="0 0 1000 400">
 <path id="circle" d="M10,0Q500,400 1000,0" />
</svg>

Это просто отграничить размер самого SVG

2

Почему бы не использовать два элемента path с помощью команды arc?

<svg width="135" height="135">
  <path d="M125,85 a60,60 0 1,0 -115,0" fill="#E79A16" /><!--Top Half-->
  <path d="M10,85 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>

Вы можете легко их разделить.

<svg width="135" height="135">
  <path d="M125,80 a60,60 0 1,0 -115,0" fill="#E79A16" /><!--Top Half-->
</svg>
<svg width="135" height="135">
  <path d="M10,80 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>
<svg width="135" height="135">
  <path d="M10,0 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>  

Перевод ответа: Draw half circle with CSS or SVG @chipChocolate.py

2

Вы можете сделать это с помощью CSS:

.partial-circle {
  position: relative;
  width: 100px;
  overflow: hidden;
}
.partial-circle:before {
  content: '';
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.partial-circle.top {
  height: 80px;
}
.partial-circle.bottom {
  height: 20px;
}
.partial-circle.top:before {
  top: 0;
  background: #E19B21;
}
.partial-circle.bottom:before {
  bottom: 0;
  background: #D08707;
}
<div class="partial-circle top"></div>
<div class="partial-circle bottom"></div>

Перевод ответа: Oriol

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.