tạo thiết kế hình lục giác tự động sử dụng css và js

Question

Đây không phải là bản sao của bất kỳ hãy giúp tôi

Tôi có một số trick ở đây http://jsfiddle.net/kizu/bhGn4/

Tôi muốn tạo ra nó tự động với CSS, vậy làm thế nào để làm điều đó ?

bất kỳ khi nào có bất kỳ mục nhập mới nào được thêm vào thiết kế tự động điều chỉnh.

Tôi đã cố gắng hết sức để tìm kiếm và tôi đã nhận một số trợ giúp cho hình dạng vòng tròn ở đây

How to create circles around a circle with css, javascript?

cùng cái gì tôi muốn với hình lục giác

Answer 1

Đi qua bản demo này mà tôi đã tạo:

.hexagon { 
 
    width: 100px; 
 
    height: 55px; 
 
    background: red; 
 
    position: absolute; 
 
} 
 
.hexagon:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -25px; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-bottom: 25px solid red; 
 
} 
 
.hexagon:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -25px; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-top: 25px solid red; 
 
} 
 
.hex1 { 
 
    top: 20px; 
 
    left: 0px; 
 
} 
 
.hex2 { 
 
    top: 20px; 
 
    left: 110px; 
 
} 
 
.hex3 { 
 
    top: 20px; 
 
    left: 220px; 
 
} 
 
.hex4 { 
 
    top: 110px; 
 
    left: 55px; 
 
} 
 
.hex5 { 
 
    top: 110px; 
 
    left: 165px; 
 
} 
 
.hex6 { 
 
    top: 110px; 
 
    left: 275px; 
 
}

<div style="position:absolute; top:30px"> 
 
    <div class="hexagon hex1"></div> 
 
    <div class="hexagon hex2"></div> 
 
    <div class="hexagon hex3"></div> 
 
    <div class="hexagon hex4"></div> 
 
    <div class="hexagon hex5"></div> 
 
    <div class="hexagon hex6"></div> 
 
</div>

Answer 2

Có hướng dẫn tuyệt vời ở đây về cách tạo hình lục giác bằng CSS. Xem hướng dẫn từng bước khi bắt đầu.

Create Hexagon shapes with pure CSS3

Cũng xem ví dụ này về CSSTricks. Bạn sẽ nhận được một ý tưởng về cách tiếp cận các loại vấn đề này.

Shapes of CSS

Hy vọng điều đó sẽ hữu ích! :)

Answer 3

Hãy xem this CSS hexagon tutorial mô tả cách tạo hình lục giác và có thể thay đổi kích thước chúng bằng calc().

Tất cả những gì bạn cần là một giá trị cho chiều cao và phần còn lại được thực hiện cho bạn. Nó cũng chỉ sử dụng một lớp duy nhất