Граница стиля круга, чтобы быть клещами - PullRequest
Новая
       37

Граница стиля круга, чтобы быть клещами

0 голосов
/ 24 ноября 2018

У меня есть круг с пунктирными границами.Однако вместо точек граница должна быть больше похожа на вертикальную черту.

Есть ли способ сделать границу точно такой же, как у дизайна (вертикальные черты, а не жирная сплошная линия) с помощью css?

Я хочу изменить этот класс: "OtherCaptionBorder"

Мой css: 

    .caption_circle{
    position: absolute;
    top: 450px;
    left: 7%;
    z-index: 10;
    padding-top: 35px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    height: 245px;
    width: 245px;
    background-color: #373737;
    opacity: 0.83;
    border-radius: 50%;
    display: inline-block;
    border-color: #fff;
    border-style: solid;
    border-width: 7px;
    font-family: open_sansregular;
    font-weight: 600;
}
.OtherCaptionBorder{
position: absolute;
    top: 2px;
    left: 1%;
    z-index: 10;
    padding-top: 35px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    height: 228px;
    width: 228px;
    border-radius: 50%;
    border: 2px dotted #ffffff;
}
.InnerCircleText{
margin-top: 8px;
    font-size: 18px;
    font-family: open_sansregular;
    font-size: 24.3px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.11;
    letter-spacing: 0.8px;
    text-align: center;
    color: #ffffff;
}

Вот мой HTML: 

  <div class="caption_circle">
   <div class="OtherCaptionBorder">
   <p class="InnerCircleText">
    DOCTOR-<br>
    RECOMMENDED<br>
    FOR IBS, IBD,<br>
    CELIAC<br>
    & SIBO<br>
    <hr class="HRHomepage">
    </p>
    </div>
  </div>

Вот как яхочу, чтобы мой круг выглядел так: Ticks border needed.

1 Ответ

0 голосов
/ 24 ноября 2018

Вы можете достичь чего-то близкого к тому, что вам нужно, только с помощью CSS, но, поскольку вы не можете контролировать длину (или расстояние между ними) штрихов в стиле границы, вы, скорее всего, получите неудовлетворительный результат.в начале / в конце круга, где встречаются границы. 

body {
background: #ccc;
}

.outer {
  background-color: rgba(0,0,0,0.5);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid white;
}

.inner {
  width: 100%;
  height: 100%;
  border: 5px dashed white;
  border-radius: 50%;
  box-sizing: border-box;
}
<div class="outer">
  <div class="inner"></div>
</div>

Но если вы можете использовать SVG, у вас есть контроль над stroke-dasharray

.img-bg {
  background-image: url(https://picsum.photos/900/500);
  background-size: cover;
}

.outer-circle {
  position: relative;
  background: transparent;
  width: 20em;
  height: 20em;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1em solid white;
  overflow: hidden;
}

.custom-circle {
  stroke-width: 10;
  stroke: white;
  stroke-linecap: butt;
  fill: rgba(0, 0, 0, 0.5);
  stroke-dasharray: 1 2.14; /* See below for an explanation */
}

.text {
  margin: 0 auto;
  padding: 0 1.5em;
  color: white;
  text-align: center;
  position: absolute;
  top: 50%;
  font-size: 2em;
  transform: translateY(-50%);
}

hr {
  width: 60%
}
<section class="img-bg">
  <div class="outer-circle">
    <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle class="custom-circle" cx="50" cy="50" r="50" />
</svg>
    <div class="text">Vestibulum pellentesque ac arcu eget.<hr/></div>
  </div>
</section>

Расчет значений stroke-dasharray:

Почему магическое число 2,14?Согласно ответу Роберта на другой вопрос:

Окружность окружности / сумма значений stroke-dasharray должна быть целым числом, если вы хотите равномерно расположенные линии ...

Мы знаем, что наш круг имеет радиус 50 (<circle ... r="50" />).Итак, с небольшой математикой (вы можете использовать Google для этого): 

C=2πr=2·π·50≈314.15927

мы рассчитываем, что наша окружность равна 314.15927

Скажем, мы хотим 100 тире ,оттуда C/100 ≈ 3.14.Это дает нам dash-array: 1 2.14.

...