在圆圈的边框中获取相同自定义按钮的高度:

Question

我正在创建一个圆圈，里面有两个按钮，是圆的 1/3

https://codepen.io/bradrar1/pen/ZEYBNpg

问题是，我无法正确获得按钮的高度以与父圆圈完美对齐。

.HTML：

<div class="circle"> 
<button class="button one"> Play </button>
<button class="button two"> Pause </button>
</div>

.CSS：

.circle {
width: 300px;
height: 300px;
border: 10px solid black;
border-radius: 100%;
position: relative;
}
.button {
position: absolute;
width: 145px;
height: 100px;
/*   I tried adding z-index to hide excess, but it is now unclickable */
/*   z-index: -1;  */
}
.one {
bottom: 0;
left: 5px;
border-radius: 0 0 0 100%;
/*   trying to hide excess, by adding a black border */
/*   border-left: 5px solid black */
}
.two {
bottom: 0;
right: 5px;
border-radius: 0 0 100%;
/*   trying to hide excess, by adding a black border*/
/*   border-right: 5px solid black; */
}

我试着摆弄.button的高度，但我似乎无法完美地对齐它。

我还尝试添加具有不同px的边框以尝试隐藏重叠的边，但它并没有完全隐藏。

我的最终解决方案是将z-index添加到.button并且有效！ 唯一的问题是我无法再单击该按钮。

我怎样才能让它变得完美？请帮忙

Answer 1

你能试试这个吗：我已经添加了overflow:hidden.circle并删除了border-radius在按钮上

.circle {
width: 300px;
height: 300px;
border: 10px solid black;
border-radius: 100%;
position: relative;
overflow:hidden;
}
.button {
position: absolute;
width: 140px;
height: 100px;
}
.one {
bottom: 0;
left: 10px;
}
.two {
bottom: 0;
right: 10px;
}

Answer 2

您可以从按钮中删除边框半径属性，并将overflow:hidden添加到父div(圆圈(

.circle {
width: 300px;
height: 300px;
border: 10px solid black;
border-radius: 100%;
position: relative;
overflow:hidden;
}
.button {
position: absolute;
width: 145px;
height: 100px;
/*   I tried adding z-index to hide excess, but it is now unclickable */
/*   z-index: -1;  */
}
.one {
bottom: 0;
left: 5px;
/*   trying to hide excess, by adding a black border */
/*   border-left: 5px solid black */
}
.two {
bottom: 0;
right: 5px;
/*   trying to hide excess, by adding a black border*/
/*   border-right: 5px solid black; */
}

<div class="circle"> 
<button class="button one"> Play </button>
<button class="button two"> Pause </button>
</div>

Answer 3

这里有几个选项。您可以尝试将它们完美对齐(通过使每个按钮的圆宽 50%，并匹配边框半径(，或者您可以尝试将它们隐藏在圆后面，并在圆上pointer-events额外的属性，如下所示;

.circle {
width: 300px;
height: 300px;
border: 10px solid black;
border-radius: 100%;
position: relative;
z-index: 1;
pointer-events: none; /* the magic sauce */
overflow: hidden;
}
.button {
position: absolute;
width: 140px;
height: 100px;
/*   I tried adding z-index to hide excess, but it is now unclickable */
z-index: -1;  
pointer-events: all; /* the magic sauce */
}
.one {
bottom: 0;
left: 10px;
border-radius: 0 0 0 100%;
/*   trying to hide excess, by adding a black border */
/*   border-left: 5px solid black */
}
.two {
bottom: 0;
right: 10px;
border-radius: 0 0 100%;
/*   trying to hide excess, by adding a black border*/
/*   border-right: 5px solid black; */
}

<div class="circle"> 
<button class="button one"> Play </button>
<button class="button two"> Pause </button>
</div>