7
Nhiều nút cho một vòng kết nối
Tôi muốn tạo vòng kết nối có khoảng cách bằng 6 nút. Trong hình ảnh bạn có thể thấy kết quả thử của tôi nhưng nó không giống như một vòng tròn. Tôi khoanh tròn vấn đề của mình với màu đỏ. Dưới đây bạn có thể xem xét mã HTML và CSS của tôi.
<!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>
Vì bạn có giá trị tĩnh cho chiều cao và chiều rộng. Tại sao bạn không chỉ cần thêm một hình ảnh/nền mà sẽ phác thảo các divs. Sau đó định vị chúng trong thùng chứa. Đó là giải pháp đơn giản nhất. Nhưng nếu bạn không muốn một hình ảnh, sau đó vui chơi với các giá trị biên giới. – pol
Tôi không muốn một hình ảnh. Nhưng tôi chơi arround với các giá trị biên giới và không bao giờ nhận được kết quả mong đợi ... ^^ –
Bạn có thể sử dụng SVG và vẽ đường dẫn bạn thích. – pol