Как создать кнопки с круговой формой в CSS - PullRequest
Новая
       35

Как создать кнопки с круговой формой в CSS

0 голосов
/ 04 июля 2019

Я сейчас пытаюсь воссоздать следующий PNG в HTML / CSS

mock up image

Готовый продукт должен выглядеть примерно так - 3 кнопки, расположенные равномерно в круговой «форме» (если вы посмотрите на границу элемента, вы увидите, как они очерчивают круг).

enter image description here

Как я могу восстановить это в CSS / HTML?

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

пс. его нельзя скопировать с помощью border-radius

Спасибо!

Ответы [ 2 ]

4 голосов
/ 04 июля 2019

Вы можете использовать clip-path с формой круга, и хитрость заключается в том, чтобы убедиться, что 3 круга будут перекрываться: 

* {
  box-sizing:border-box;
}

.box {
  margin:20px auto;
  width:300px;
  height:300px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px;
}
.box button{
  height:50px;
  border:0;
  font-size:18px;
  background:#c1ab32;
  color:#fff;
  margin:10px 0;
}

.box button:first-child {
  /* we offset by half the height and the margin*/
  clip-path:circle(120px at 50% calc(100% + 20px + 25px));
}
.box button:nth-child(2) {
  /* circle with radius of 120px at the center*/
  clip-path:circle(120px at 50% 50%);
}

.box button:last-child {
  clip-path:circle(120px at 50% calc(0% - 20px - 25px));
}

body {
 background:pink;
}
<div class="box">
<button>first</button>
<button>second</button>
<button>third</button>
</div>

Похожая идея - закрасить фон радиальным градиентом, и вы также убедитесь, что это тот же круг: 

* {
  box-sizing:border-box;
}

.box {
  margin:20px auto;
  width:300px;
  height:300px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px;
}
.box button{
  height:50px;
  border:0;
  font-size:18px;
  color:#fff;
  margin:10px 0;
}

.box button:first-child {
  background:radial-gradient(circle 120px at 50% calc(100% + 20px + 25px),#c1ab32 99%,transparent 100%);
}
.box button:nth-child(2) {
 background:radial-gradient(circle 120px at 50% 50%,#c1ab32 99%,transparent 100%)
}

.box button:last-child {
  background:radial-gradient(circle 120px at 50% calc(0% - 20px - 25px),#c1ab32 99%,transparent 100%)
}

body {
 background:pink;
}
<div class="box">
<button>first</button>
<button>second</button>
<button>third</button>
</div>

Вы также можете применить путь клипа к контейнеру: 

* {
  box-sizing:border-box;
}

.box {
  margin:20px auto;
  width:300px;
  height:300px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px;
  border:1px solid;
  clip-path:circle(120px at 50% 50%);
}
.box button{
  height:50px;
  border:0;
  font-size:18px;
  background:#c1ab32;
  color:#fff;
}

.box button:nth-child(2) {
  margin:20px 0;
}

body {
 background:pink;
}
<div class="box">
<button>first</button>
<button>second</button>
<button>third</button>
</div>
2 голосов
/ 04 июля 2019

Вы можете использовать overflow:hidden на контейнере и чуть более широкие кнопки: 

* {
  box-sizing: border-box;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border:solid 20px transparent;
  border-radius: 50%;
  background:#bdbdbd;
  box-shadow:0 0 0 10px #808080, 1px 2px 5px 10px #000;
}

.box button {
  width: 110%;
  height: 50px;
  border: solid 1px #bfa962;
  font-size: 18px;
  background: linear-gradient(#dabf63, #ad984f);
  color: #fff;
}

.box button:nth-child(2) {
  margin: 20px 0;
}
<div class="box">
  <button>first</button>
  <button>second</button>
  <button>third</button>
</div>
...