Как нарисовать полукруг на CSS
Полукруг получается если у прямоугольника, у которого одна сторона в два раза больше другой, закруглить углы [см. генератор]. С помощью padding в процентах можно добиться пропорционального изменения высоты и ширины «резинового» блока.
Слово1 да слово2 да слово3 да слово4
текст
Слово1 да слово2 да слово3 да слово4
текст
clip-path : отсечь лишний фрагмент HTML-элемента
Свойство clip-path вырезает из элемента часть:
Слово1 да слово2 да слово3 да слово4
текст
Слово1 да слово2 да слово3 да слово4
текст
С помощью shape-inside
Свойство shape-inside позволяет вписать текст в окружность, даже без самой окружности, но пока не поддерживается браузерами.
текст текст текст текст текст текст текст текст текст текст
текст
- Круг на CSS
- Треугольник на CSS
Как создать дугу на CSS?
Необходимо сделать вот такую дугу, которая будет меняться от нуля до 100%, превращаясь в круг. При этом все, что белым цветом — полупрозрачно.
Реально ли это сделать на CSS? Или придется использовать canvas/SVG? Хотелось бы увидеть живой пример.
- Вопрос задан более трёх лет назад
- 4821 просмотр
Как нарисовать через CSS такую дугу?
Как нарисовать через CSS такую дугу? Двух-цветную?
Что вообще понимается в макете под таким элементом?
Индикатор загрузки?
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как нарисовать такую картинку с помощью CSS?
Ребят,как нарисовать такую картинку с помощью CSS?Хотя может вы подскажите решение другое,у меня.
Подскажите, пожалуйста, как правильно нарисовать такую линию в css?
Пробовал эту линию через <hr> , но что то не выходило по центру сделать. Да и думаю, так сейчас не.
Как сделать такую диагональную линию через CSS?
В макете есть диагональная линяя, которая идея от одного края к другому постепенная снижаясь. Как.
Подскажите как можно сверстать такую фигуру через CSS
Подскажите как можно сверстать такую фигуру через CSS
2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928
Сообщение было отмечено SeregaNv как решение
Решение
например так:
1 2 3 4
div class="outer"> div class="inner"> /div> /div>
1 2 3 4 5 6 7 8
.outer{width: 110px;height: 50px;overflow:hidden} .inner{width: 100px;height: 100px; border-left:5px solid red; border-top:5px solid green; border-right:5px solid green; border-bottom:5px solid red; transform: rotate(75deg); border-radius:50%}
а пониматься может все что угодно, индикатор загрузки, температуры, давления
смотря какой контекст и какая задумка дизайнера
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Как сделать дугу css
Помогите, как сделат таскую дугу через css
Нарисовать дугу через 3 точки
Как нарисовать дугу через 3 точки? К примеру у меня на форме 3 спрайта которые перетягиваются.
Нарисовать дугу соединяющую два вектора, проходящих через общий центр, зная радиус
Здравствуйте форумчане. Имеется точка, которую пронизывают два вектора (луча). Зная радиус нужно.
как нарисовать дугу
у меня есть чертеж Первый рисунок я почти нарисовал. Подскажите как нарисовать эти 2 дуги.
Как сделать дугу на CSS или SVG
Так как в ответе достаточно мало информации о задании, то могу предложить такой некрасивый, костыльный, но работающий вариант. Как реализовать получше я еще подумаю.
Отслеживать
ответ дан 13 авг 2017 в 9:09
3,169 2 2 золотых знака 22 22 серебряных знака 44 44 бронзовых знака
Попробуйте создать элемент и написать в CSS
.cont< display:block; width: 100px; height:100px; border-radius:50%; border-top:1px solid #000;Отслеживать
ответ дан 13 авг 2017 в 9:08
321 2 2 серебряных знака 10 10 бронзовых знаков
Мой вариант решения, делала дуги разного градуса 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
Отслеживать
ответ дан 24 окт 2018 в 21:35
Ксюша Щанникова Ксюша Щанникова
41 1 1 бронзовый знак
Вдохновившись качеством ответа от @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 .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 body
Любую дугу можно "зеркалить" сверху/вниз и слева/направо. Достаточно лишь аргументы в соответствующих рисунку border-radius: поменять местами, да в нужном месте border-radius: none; сделать.
Оригинал лежит в "песочнице".