在图中制作按钮

Question

我想制作如下图所示的按钮：

有人可以用CSS帮我吗？

Answer 1

试试这个

＆＃13;

＆＃13;

.container{
  width:200px;
  height:200px;
  border:1px solid #9fdbeb;
  border-radius:50%;
  position:relative;
  margin:50px;
}

.button{position:absolute;border:none;border-radius: 50%;cursor:pointer;background:#7092be;}
.button1 {
    width: 70px;
    height: 70px;
    background: #99d9ea;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.button2{
  width:50px;
  height:50px;
  top:-22px;
  left:0;
  right:0;
  margin:0 auto;
}
.button3{
  width:50px;
  height:50px;
  bottom:-22px;
  left:0;
  right:0;
  margin:0 auto;
}
.button4{
  width:50px;
  height:50px;
  bottom:0;
  top:0;
  left:-22px;
  margin:auto 0;
}
.button5{
  width:50px;
  height:50px;
  bottom:0;
  top:0;
  right:-22px;
  margin:auto 0;
}

＆＃13;

<div class="container">
<button class="button button1"></button>
<button class="button button2"></button>
<button class="button button3"></button>
<button class="button button4"></button>
<button class="button button5"></button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用absolute位置使用css创建此项，但您必须对值进行硬编码。

＆＃13;

＆＃13;

.parent {
  position: relative;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  background: #99D9EA;
  margin: 100px 150px;
}
.parent:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 205px;
  height: 205px;
  border: 1px solid #ACE0EE;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #7092BE;
}
.circle:nth-child(1) {
  margin-top: -100px
}
.circle:nth-child(2) {
  margin-left: 100px
}
.circle:nth-child(3) {
  margin-left: -100px
}
.circle:nth-child(4) {
  margin-top: 100px
}

＆＃13;

<div class="parent">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

＆＃13;

＆＃13;

＆＃13;