Làm thế nào để thực hiện một div octogonal?

Question

Ý tưởng khá đơn giản, nhưng tôi không chắc chắn cách thực hiện điều này. Tôi muốn có thể tạo kiểu cho nó là div (nếu có thể).

Làm cách nào để tạo một hình bát giác div?

Answer 1

CSS được sử dụng trong this link là thế này:

#octagon { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position: relative; 
} 

#octagon:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0;  
    border-bottom: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
     width: 42px; 
    height: 0; 
} 

#octagon:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0;  
    border-top: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 
} 

Nó được xây dựng từ phần tử div chính nó mà được đưa ra một hình chữ nhật. Sử dụng các lớp giả :before và :after giả, nội dung được thêm vào để tạo hai hình thang hoàn thành hình bát giác. Thông minh, điều này sẽ giữ số lượng thẻ thực sự chỉ bằng một lần bằng cách sử dụng các bit thú vị của CSS.

Có thể tìm thấy nguồn gốc của kỹ thuật này here.

---

Here is a quick demo. Phần màu xanh là CSS :before và màu xanh lá cây là :after CSS. Và thậm chí tốt hơn, here is a demo cho phép hình nền trong suốt! (cảm ơn bạn @GGG).

Answer 2

Làm thế nào về chỉ cần tạo một hình vuông, xoay nó 45 độ và sau đó cắt các góc?

.octagon { 
    height: 10em; 
    position: relative; 
    overflow: hidden; 
    width: 10em; 
} 

.octagon:after { 
    background: red; 
    content: " "; 
    height: 100%; 
    position: absolute; 
    width: 100%; 


    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
     -ms-transform: rotate(45deg); 
     -o-transform: rotate(45deg); 
      transform: rotate(45deg); 

} 

jsFiddle

Answer 3

Bạn cũng có thể đạt được một div octogonal với inline svg sử dụng polygon element.
Dưới đây là một ví dụ:

svg{width:30%;}

<svg viewbox="0 0 10 10"> 
 
    <polygon points="3 0, 7 0, 10 3, 10 7, 7 10, 3 10, 0 7, 0 3" /> 
 
</svg>