多個按鈕到一個圓圈

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

 
</body> 
 
</html>

來源

2016-12-28 Tobias Egli

既然你有高度和寬度靜態值。你爲什麼不添加一個能夠勾勒出div的圖像/背景？然後將它們放在容器中。這是最簡單的解決方案。但是如果你不想要圖像，那麼玩邊框值就很有趣。 – pol

我不想要圖片。但是我邊玩邊框值，從未收到預期的結果...... ^^ –

您可以使用SVG並繪製您喜歡的路徑。 – pol

正如評論所說，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>

來源

2016-12-28 15:16:23

如何使其響應？ :-) – Legends

多個按鈕到一個圓圈

回答

相關問題