Как добавить изогнутую пунктирную линию около 3 делений один под другим, как показано на рисунке - PullRequest
Новая
       1

Как добавить изогнутую пунктирную линию около 3 делений один под другим, как показано на рисунке

0 голосов
/ 15 мая 2018

enter image description here

Как добавить изогнутую пунктирную линию вокруг 3 делений, как показано на рисунке.

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Вы можете попробовать это 

.content{width: 400px;position: relative;}
.round-dot1 {
  border: 2px dotted #000000; 
  border-bottom-left-radius: 60px;  
  padding: 20px 30px;
  color: #000000;
  border-right: 0px dotted #000000;

  float: left;

  border-top: 0px;
  border-left: 0px;
  position: absolute;
}
.round-dot2 {
  border: 2px dotted #000000;
  border-radius: 0 60px 60px 0;
  padding: 20px 30px;
  color: #000000;
  border-left: 0px dotted #000000;
  float: right;
  position: absolute;
  top: 130px;
  right: 2px;
}
<div class="content">
  <div >
      <div class="round-dot1">
      Here are some text Here are some text <br /><br />Here are some text <br /><br />Another text
      </div>
  </div>
  <div >
      <div class="round-dot2">
      Here are some text Here are some text <br /><br />Here are some text <br /><br />Another text
      </div>
  </div>
</div>

Вот jsfiddle .

Это только начало всего решения.

Совет: В следующий раз, пожалуйста, пришлите более подробную информацию в вашем вопросе, а также приложите свой код.

0 голосов
/ 15 мая 2018

Вы можете попробовать использовать границы и границы радиуса, чтобы помочь: 

.round-dot {
  border: 1px dotted #000000;
  border-radius: 60px;
  padding: 20px 30px;
  color: #000000;
}
<html>

<body>
  <div style="width:500px; ">
    <div class="round-dot">Here are some text Here are some text <br /><br />Here are some text <br /><br />Another text</div>
  </div>
</body>

</html>

Это может создать изогнутую пунктирную линию.Как сильно он должен изгибаться, вам нужно отрегулировать радиус границы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...