Как сделать дугу на css или SVG, длиною на половину круга.
Нужны разные варианты расположения дуг относительно осей координат (4 расположения)
5 ответов
Так как в ответе достаточно мало информации о задании, то могу предложить такой некрасивый, костыльный, но работающий вариант. Как реализовать получше я еще подумаю.
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>
Попробуйте создать элемент и написать в CSS
.cont{
display:block;
width: 100px;
height:100px;
border-radius:50%;
border-top:1px solid #000;
<div class="cont">
</div>
Мой вариант решения, делала дуги разного градуса 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>
Вдохновившись качеством ответа от @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;
сделать.Оригинал лежит в "песочнице".
Вариант 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>