бордюр изогнутый css - круг с загнутым концом - PullRequest
Новая
       6

бордюр изогнутый css - круг с загнутым концом

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

Я создаю веб-сайт, и мне трудно делать детали в CSS

Мне нужно сделать круглую рамку с изогнутым концом, чтобы вы лучше поняли, я покажуфото и пост мой код

Что мне нужно (фотошоп)

enter image description here

enter image description here

Я бы хотел CSS-решение, но не смог.

Вот что у меня есть на самом деле: 

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -10px;
  border-radius: 100%;
  background: #29a7e8;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}
<div class="bottom-bar">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>

1 Ответ

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

Вы можете сделать это, используя SVG в качестве фона: 

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -28px;
  border-radius: 100%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15'  width='64' height='64' fill='%2329a7e8'><path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' /></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}
<div class="bottom-bar">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>


<svg xmlns='http://www.w3.org/2000/svg'
  viewBox='10 10 45 15'
  width='64' height='64'
  fill='#29a7e8'>
  <path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' />
</svg>

Для решения только для CSS вы можете рассмотреть комбинацию радиального градиента для создания кривой: 

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -30px;
  background:
  radial-gradient(circle at top right,transparent 50%,#29a7e8 51%)100% 21px/12px 10px no-repeat,
  radial-gradient(circle at top left,transparent 50%,#29a7e8 51%)0 21px/12px 10px no-repeat,
  radial-gradient(circle at center,#29a7e8 55%, transparent 56%);
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}
<div class="bottom-bar">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
...