Question

我想创建一个与我的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>

Answer 1

正如评论中所建议的那样，svg路线是快速复制你想要的东西的最简单方法。

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

我创建了一支笔here。

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

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

＆＃13;

.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%;
        }

＆＃13;

<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>

＆＃13;

多个按钮到一个圆圈

1 个答案: