1

Как сделать дугу на css или SVG, длиною на половину круга.
Нужны разные варианты расположения дуг относительно осей координат (4 расположения)

5 ответов 5

7

Так как в ответе достаточно мало информации о задании, то могу предложить такой некрасивый, костыльный, но работающий вариант. Как реализовать получше я еще подумаю.

div{
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
  border-top: 5px solid red;
  border-left: 5px solid red;
  border-right: 5px solid red;
}
<div></div>

5

Попробуйте создать элемент и написать в CSS

.cont{
  display:block;
  width: 100px;
  height:100px;
  border-radius:50%;
  border-top:1px solid #000;
<div class="cont">

</div>

4

Мой вариант решения, делала дуги разного градуса https://codepen.io/ksenia-ok/pen/xyyNmz

#rotate_360,
#rotate_270,
#rotate_180,
#rotate_90 {
    position: relative;
    width: 212px;
    height: 100px;
}

.flex_block {
  display: flex;
}
 
#rotate_90:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border-left: 20px solid white;
    border-right: 20px solid red;
    border-top: 20px solid white;
    border-bottom: 20px solid white;
    -moz-border-radius: 50px 50px 50px 50px;
         border-radius: 50px 50px 50px 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
 
#rotate_180:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border-left: 20px solid white;
    border-right: 20px solid red;
    border-top: 20px solid white;
    border-bottom: 20px solid red;
    -moz-border-radius: 50px 50px 50px 50px;
         border-radius: 50px 50px 50px 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

#rotate_270:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border-left: 20px solid red;
    border-right: 20px solid red;
    border-top: 20px solid white;
    border-bottom: 20px solid red;
    -moz-border-radius: 50px 50px 50px 50px;
         border-radius: 50px 50px 50px 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

#rotate_360:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border: 20px solid red;
    -moz-border-radius: 50px 50px 50px 50px;
         border-radius: 50px 50px 50px 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
<div class="flex_block">
  <div id="rotate_90"></div>
  <div id="rotate_180"></div>
  <div id="rotate_270"></div>
  <div id="rotate_360"></div>
</div>

3

Вдохновившись качеством ответа от @not_a_true_programmer - решил опробовать его метод в песочнице и вот что получилось:

main {
  width: auto;
  padding: 10px;
  background: #222;
  border: 4px solid #929292;
  border-radius: 150px;
  display: inline-block;
}

div {
  display: flex;
}

.cr {
  visibility: hidden;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
}

.center {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 4px solid #929292;
  border-radius: 50%;
  background: radial-gradient(#becccc, #929292, #becccc);
}

.vrh, /*верх*/
.niz, /*низ*/
.lev, /*лево*/
.prv {/*право*/
  display: inline-block;
  border-top: 4px solid #929292;
  border-left: 4px solid #929292;
  border-right: 4px solid #929292;
  border-bottom: 4px solid #929292;
}

.vrh { /*верх*/
  width: 100px;
  height: 50px;
  border-bottom: none;
  border-radius: 100px 100px 0 0;
  background: radial-gradient(#becccc, #929292, #becccc);
}

.niz { /*низ*/
  width: 100px;
  height: 50px;
  border-top: none;
  border-radius: 0 0 100px 100px;
  background: radial-gradient(#becccc, #929292, #becccc);
}

.lev { /*лево*/
  width: 50px;
  height: 100px;
  border-right: none;
  border-radius: 100px 0 0 100px;
  background: radial-gradient(#becccc, #929292, #becccc);
}

.prv {/*право*/
  width: 50px;
  height: 100px;
  border-left: none;
  border-radius: 0 100px 100px 0;
  background: radial-gradient(#becccc, #929292, #becccc);
}

body {
  background: radial-gradient(black 2.5%, transparent 40%) 0 0, radial-gradient(black 2.5%, transparent 40%) 3px 3px, radial-gradient(rgba(255, 255, 255, 0.2) 10%, transparent 30%) 0.6px 0.6px, radial-gradient(rgba(255, 255, 255, 0.2) 10%, transparent 30%) 3.6px 3.6px;
  background-color: #243844;
  background-size: 6px 6px;
  padding: 5px 40px;
  background-attachment: fixed;
}
<main>
  <div>
    <div class="cr"></div>
    <div class="vrh"></div>
    <div class="cr"></div>
  </div>
  <div>
    <div class="lev"></div>
    <div class="center"></div>
    <div class="prv"></div>
  </div>
  <div>
    <div class="cr"></div>
    <div class="niz"></div>
    <div class="cr"></div>
  </div>
</main>

Любую дугу можно "зеркалить" сверху/вниз и слева/направо. Достаточно лишь аргументы в соответствующих рисунку border-radius: поменять местами, да в нужном месте border-radius: none; сделать.
Оригинал лежит в "песочнице".

3

Вариант SVG

Не сложней чем в css, зато всегда будет адаптивно

Нижняя половина круга

  • При радиусе равном 50px полная длина окружности равна
    2 * 3.14 * 50 = 314px
  • Делим окружность пополам - 157px и применяем атрибут
    stroke-dasharray="157 157", где первая цифра это длина черты, вторая пробел.
  • Начало рисования окружности svg находится на положительной оси X-ов (голубая точка)

.container{
width:25%;
height:25%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 104 104" style="border:1px solid red;" >   
	
	<!-- Начало отсчета рисования окружности голубая точка -->
	<circle cx="103" cy="52" r="4" fill="dodgerblue" />
	
	<circle cx="52" cy="52"
     r="50"  stroke="crimson"
     stroke-width="2"
     stroke-dasharray="157 157"
     stroke-dashoffset="0"
     fill="none" /> 
	 
</svg>	 
</div>

Чтобы получить левую, вертикальную половину круга,
отступим от начала рисования на четверть длины окружности stroke-dashoffset="-78.5"

.container{
width:25%;
height:25%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 104 104" style="border:1px solid red;" >   
	
	<!-- Начало отсчета рисования окружности голубая точка -->
	<circle cx="103" cy="52" r="4" fill="dodgerblue" />
	
	<circle
    cx="52"
    cy="52"
    r="50"
    stroke="crimson"
    stroke-width="2"
    stroke-dasharray="157 157"
    stroke-dashoffset="-78.5"
    fill="none" /> 
	 
</svg>	 
</div>

Верхняя половина окружности stroke-dashoffset="-157" - отступаем половину окружности

.container{
width:25%;
height:25%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 104 104" style="border:1px solid red;" >   

    <!-- Начало отсчета рисования окружности голубая точка -->
    <circle cx="103" cy="52" r="4" fill="dodgerblue" />

    <circle
    cx="52"
    cy="52"
    r="50"
    stroke="crimson"
    stroke-width="2"
    stroke-dasharray="157 157"
    stroke-dashoffset="-157"
    fill="none" /> 

</svg>   
</div>

Правая половина окружности stroke-dashoffset="-235.5" - отступаем три четверти окружности

.container{
width:25%;
height:25%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 104 104" style="border:1px solid red;" >   

    <!-- Начало отсчета рисования окружности голубая точка -->
    <circle cx="103" cy="52" r="4" fill="dodgerblue" />

    <circle
    cx="52"
    cy="52"
    r="50"
    stroke="crimson"
    stroke-width="2"
    stroke-dasharray="157 157"
    stroke-dashoffset="-235.5"
    fill="none" /> 

</svg>   
</div>

Ваш ответ

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

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