多个按钮到一个圆圈答案

【问题标题】：Multiple buttons to one circle多个按钮到一个圆圈
【发布时间】：2016-12-28 13:38:21
【问题描述】：

我想用我的 6 个按钮创建一个有距离的圆圈。在图像中，您可以看到我尝试的结果，但它看起来不像一个圆圈。我用红色圈出了我的问题。下面你可以看看我的 HTML 和 CSS 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     .container {
margin-top: 360px;
margin-bottom: 16px;
padding-left: 30px;
padding-right: 30px;
}

     .top-left {
    	margin-top: -260px;
    	margin-left: -20px;
    	border-radius: 40px / 100px;
    	border-top-right-radius: 0;
    	border-bottom-right-radius: 0;
    	border-bottom-left-radius: 0;
    	position: absolute;
    }
    
    .top-right {
    	margin-top: -260px;
    	margin-left: 155px;
    	border-radius: 40px / 100px;
    	border-bottom-left-radius: 0;
    	border-top-left-radius: 0;
    	border-bottom-right-radius: 0;
    	position: absolute;
    }
    
    .bottom-left {
    	margin-top: -160px;
    	margin-left: -20px;
    	border-radius: 40px / 100px;
    	border-top-right-radius: 0;
    	border-top-left-radius: 0;
    	border-bottom-right-radius: 0;
    	position: absolute;
    }
    
    .bottom-right {
    	margin-top: -160px;
    	margin-left: 155px;
    	border-radius: 40px / 100px;
    	border-top-right-radius: 0;
    	border-top-left-radius: 0;
    	border-bottom-left-radius: 0;
    	position: absolute;
    }
    
    .top-center{
    	border-radius: 440px / 220px;
    	border-bottom-left-radius: 0;
    	border-bottom-right-radius: 0;
    	width: 270px!important;
    	height: 70px!important;
    	margin-top: -334px;
    	margin-left: 15px;
    	position: absolute;
    }
    
    .top-center p {
    	padding: 0px 40px 0px 40px;
    }
    
    .bottom-center{
    	border-radius: 440px / 220px;
    	border-top-left-radius: 0;
    	border-top-right-radius: 0;
    	width: 270px!important;
    	height: 70px!important;
    	margin-top: -64px;
    	margin-left: 15px;
    	position: absolute;
    }
    
    .bottom-center p {
    	padding: 0px 40px 0px 40px;
    }
    
    .div-button {
    	width: 168px;
    	height: 92px;
    	border: 2px solid rgba(77,207,255,1);
    	background-color: transparent;
        color: rgba(77,207,255,1);
        font-size: 25px;
        text-align: center;
    	vertical-align: middle;
    	line-height: 100px;
    	transition: all .3s linear;
    }
    
    .div-button p{
    	margin-top: -10px!important;
    	text-overflow: ellipsis;
    	white-space: nowrap;
      	overflow: hidden;
    }
    
    .button-selected {
    	transform: scale(0.8);
    	border: none;
    	background-color: rgba(77,207,255,1);
    	color: black;
    }
    </style>
</head>
<body>
  <div class="container">
	<div class="div-button top-center" id="top-center">
		<p>Text</p>
	</div>
	<div class="div-button top-left" id="top-left">
		<p>Text</p>
	</div>
	<div class="div-button top-right" id="top-right">
		<p>Text</p>
	</div>
	<div class="div-button bottom-left" id="bottom-left">
		<p>Text</p>
	</div>
	<div class="div-button bottom-right" id="bottom-right">
		<p>Text</p>
	</div>
	<div class="div-button bottom-center" id="bottom-center">
		<p>Text</p>
	</div>
</div>

</body>
</html>

【问题讨论】：

因为您有高度和宽度的静态值。你为什么不添加一个图像/背景来勾勒 div 的轮廓。然后将它们放置在容器中。这是最简单的解决方案。但是，如果您不想要图像，则可以尽情使用边框值。
我不想要图像。但我玩弄了边界值，从未收到预期的结果...... ^^
你可以使用SVG画出你喜欢的路径。
但是您已经在使用图像作为背景。为什么不将图像也用于按钮。
SVG 听起来不错 :) 不，我没有使用图像。这不是一个 Web 项目，它是一个 Tizen Gear 项目。我的背景是黑色的。在我的图片上，您可以看到智能手表的模拟器

标签： html css tizen

【解决方案1】：

正如 cmets 中所建议的，svg 路由是快速复制您想要的内容的最简单方法。

但是，喜欢挑战，我使用overflow:hidden 和position:absolute 有效地屏蔽了不同的部分。

我创建了一支笔here。

您希望在这些部分中放置的任何内容都需要放在 .circle div 中。

我希望这与您想要的一致。

.circle-container {
            position:relative;
            display:block;
            width:400px;
            height:400px;
            margin:auto;
        }
        
        .circle-crop-top {
            width: 100%;
            height: 25%;
            display:block;
            overflow:hidden;
        }
        
        .circle-first-left, .circle-first-right, .circle-second-left, .circle-second-right {
            float:left;
            width: 50%;
            height: 25%;
            overflow: hidden;
            white-space: nowrap;
        }
        .circle-bottom {
            width:100%;
            height:25%;
            display: block;
            overflow:hidden;
        }
        .circle-parent {
            position:relative;
        }
        .circle-parent p {
            position:absolute;
            text-align:center;
            margin:0;
        }
        .circle {
            width:396px;
            height:396px;
            border-radius:50%;
            position: absolute;
            top:0;
            border:2px solid blue;
            text-align: center;
            overflow:hidden;
        }
        .circle-first-left .circle {
            top:-100px;
        }
        .circle-first-right .circle {
            top:-100px;
            right: 0;
        }
        .circle-second-left .circle {
            top:-200px;
        }
        .circle-second-right .circle {
            top:-200px;
            right: 0;
        }
        .circle-bottom .circle {
            top:-300px;
            right: 0;
        }
        .circle-crop-top p {
            margin:0;
            border: 2px solid blue;
            width: 100%;
            height: 50px;
            padding-top: 40px;
            text-align: center;
            top: -2px;
        }
        .circle-first-left p {
            border: 2px solid blue;
            width: 192px;
            height: 60px;
            margin:10px 0 10px 0;
            padding-top: 30px;
            text-align: center;
            top: 23%;
            left:-2px;
        }
        .circle-first-right p {
            border: 2px solid blue;
            width: 192px;
            margin:10px 0 10px 0;
            height: 60px;
            padding-top: 30px;
            text-align: center;
            top: 23%;
            right:-2px;
        }
        .circle-second-left p {
            border: 2px solid blue;
            width: 192px;
            height: 60px;
            margin:10px 0 10px 0;
            padding-top: 30px;
            text-align: center;
            top: 48%;
            left:-2px;
        }
        .circle-second-right p {
            border: 2px solid blue;
            width: 192px;
            margin:10px 0 10px 0;
            height: 60px;
            padding-top: 30px;
            text-align: center;
            top: 48%;
            right:-2px;
        }
        .circle-bottom p {
            margin:0;
            border: 2px solid blue;
            width: 100%;
            height: 60px;
            padding-top: 40px;
            text-align: center;
            top: 76%;
        }

<div class="circle-container">
        <div class="circle-crop-top">
            <div class="circle-parent">
                <div class="circle"><p>Luzern</p></div>
            </div>   
        </div>
        <div class="circle-first-left">
            <div class="circle-parent">
                <div class="circle"><p>Bern</p></div>
            </div>
        </div>
        <div class="circle-first-right">
            <div class="circle-parent">
                <div class="circle"><p>Zurich</p></div>
            </div>
        </div>
        <div class="circle-second-left">
            <div class="circle-parent">
                <div class="circle"><p>Basel</p></div>
            </div>
        </div>
        <div class="circle-second-right">
            <div class="circle-parent">
                <div class="circle"><p>Genf</p></div>
            </div>
        </div>
        <div class="circle-bottom">
            <div class="circle-parent">
                <div class="circle"><p>Saas-Fee, Alpin</p></div>
            </div>
        </div>
    </div>

【讨论】：

如何让它响应？ :-)