如何製作八叉樹？

非常簡單的想法，但我不知道如何做到這一點。我希望能夠將其設置爲一個div（如果可能）。如何製作八叉樹？

如何創建一個八角形div？

2012-02-17 fancy

你不能。你的選擇是僞造一個圖像或使用SVG/VML – 2012-02-17 01:45:35

或css，這正是後im ... – fancy 2012-02-17 01:50:09

下面的例子是不是一個真正的八角形div;這是一個角落被遮蓋的廣場。如果你只需要展示一個八角形就可以，但是你需要在它後面放置任何東西，這樣你就會陷入困境。 – 2012-02-17 01:56:41

在this link中使用的CSS是這樣的：

#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; 
}

它是由被給予的矩形形狀的div元素本身構成。使用:before和:after僞類，添加內容以創建兩個完成八角形的梯形。巧妙地，這通過使用CSS的funkier位將實際標籤計數保持爲一。

該技術的起源可以找到here。

Here is a quick demo。藍色部分是CSS1和:before CSS，綠色部分是:after CSS。甚至更好，here is a demo，允許透明背景！（謝謝@GGG）。

來源

2012-02-17 01:46:41 Bojangles

我站好了。 +1。 – AlienWebguy 2012-02-17 01:48:20

我爲一個令人難以置信的超酷鏈接+1，但我今天沒有投票= /偉大的發現，雖然 – Joe 2012-02-17 01:49:19

感謝這個例子，我期待使用：before和：after。正是我在找什麼，謝謝。 – fancy 2012-02-17 01:50:51

只是做一個正方形，旋轉它45度，然後夾角？

.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

來源

2013-10-09 10:24:47

+1，因爲它具有透明邊框 – 2014-07-16 11:14:24

您也可以使用polygon element achive一個八角形格與inline svg。
下面是一個例子：

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>

來源

2016-04-13 15:11:40

如何製作八叉樹？

回答

相關問題