Вопрос по html, css-shapes, css – Полукруг с CSS (граница, только контур)

49

Я пытаюсь создать круг с помощью CSS, который выглядит так, как показано на следующем рисунке:

... только с однимdiv:

<div class="myCircle"></div>

и с помощьютолько CSS определения. Нет SVG, WebGL, DirectX, [...] допускается.

Я попытался нарисовать полный круг и затухать половину с другимdivи это работает, но я ищу более элегантную альтернативу.

В самом деле? Опустить голос снова? Как мне улучшить этот вопрос? Это нелепо. Dyin
@Dyin - вопрос мог быть улучшен, потому что вы написали «Я пытаюсь создать круг с помощью CSS», но вам не удалось поделиться кодом, который вы пробовали, и вы запрашиваете код. Долгосрочным пользователям SO это не нравится, так как они считают, что вы ничего не пробовали, и ищут кого-то, кто сделает работу за вас. Это изложено в часто задаваемых вопросах SO и было в течение многих лет. Я не сторонник правил здесь, я просто объясняю, почему вы изначально получили отрицательное голосование, и отвечаю на ваш вопрос «Как мне улучшить этот вопрос?». Этот вопрос предоставил некоторую полезную информацию, так что спасибо. Martin James
@TheCarver Но я думаю, что худшее, что произошло здесь, это то, что вы использовали цитату, когда вы намеренно редактировали ее, чтобы иметь возможность как-то доказать свою точку зрения. Я позволю вам подумать о том, что это было ошибкой, и часть, которую вы удалили, явно должна была привести ваш аргумент к прочной основе - а где нет. Dyin
Я с Мартином. Вы сказали: «Я пытался нарисовать полный круг, и это не работает, но я ищу более элегантную альтернативу». Как пользователи SO должны придумать «более элегантную альтернативу», если они не знают, что вы пробовали? Альтернатива чему ?! Вы также сказали: «Вопрос явно не связан с проблемой в любом фрагменте кода», но вы сказали, что написанный вами код не работает! Я ненавижу это говорить, но это также не место для спора. Вы спросили, как можно улучшить ваш вопрос, и кто-то любезно ответил за вас. Если вам не нравится критика, не просите ее. TheCarver

Ваш Ответ

3   ответа
0

Я использую процентный метод для достижения

        border: 3px solid rgb(1, 1, 1);
        border-top-left-radius: 100% 200%;
        border-top-right-radius: 100% 200%;
Это показывает только наполовину заполненный круг, а не полукруглый круг. ioCron
5

.rotated-half-circle {
  /* Create the circle */
  width: 40px;
  height: 40px;
  border: 10px solid black;
  border-radius: 50%;
  /* Halve the circle */
  border-bottom-color: transparent;
  border-left-color: transparent;
  /* Rotate the circle */
  transform: rotate(-45deg);
}
<div class="rotated-half-circle"></div>

70

Вы могли бы использоватьborder-top-left-radius а такжеborder-top-right-radius свойства для скругления углов на блоке в соответствии с высотой блока (и добавленными границами).

Затем добавьте границу к верхним / правым / левым сторонам поля, чтобы добиться эффекта.

Ну вот:

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    background-color: gold;
    border-top-left-radius: 110px;  /* 100px of height + 10px of border */
    border-top-right-radius: 110px; /* 100px of height + 10px of border */
    border: 10px solid gray;
    border-bottom: 0;
}

РАБОЧАЯ ДЕМО.

В качестве альтернативы, вы можете добавитьbox-sizing: border-box в поле, чтобы вычислить ширину / высоту поля, включая границы и отступы.

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ОБНОВЛЕНО ДЕМО. (демонстрация без фона)

Не удаляйте это. Это другой подход! Miljan Puzović
Гораздо лучше, чем мой подход. Удаляя мой ответ Paul Roub
Блестящий, именно то, что я искал. Спасибо! michal
@PaulRoub IMO, мой подход не превосходит ваш, так как они не будут работать в IE8 и ниже :) (из-заborder-radius имущество) Hashem Qolami

Похожие вопросы