我該如何製作這種邊框？

我是否必須使用圖像來製作這種...我甚至不知道如何解釋它（我的母語不是英語），但是它是從頂部到較暗部分的轉換網站： http://thegregthompson.com/ 。我有使用圖像，或者我可以做到這一點與不過分複雜的CSS？（僞元素是罰款）我該如何製作這種邊框？

2012-10-11 imp

如果你指的是鋸齒狀邊緣/迷你三角形，那麼一個簡單的時間，你會更好重建的方式，他們使用重複http://thegregthompson.com/wp-content/themes/GregThompson/assets/img/border-top.png。

我敢肯定，它可能會在純粹的CSS，但它絕對不會是'不過分複雜'，我的第一個想法是會有很多不必要的標記。

我希望這可以幫助

2012-10-11 14:13:27

好吧，我想最好的方法是使用圖像。謝謝。 – imp

是的，雖然[CSS三角形]（http://css-tricks.com/snippets/css/css-triangle/）是可能的，但重複的行將需要重複的行標記元素，只要我可以看到。一個圖像是要走的路，除非你想特別展示極端的CSS。 –

這就是他們使用的是什麼：

.sub_hold_top { 
    height: 10px; 
    background-image: url('../img/border-top.png'); 
    width: 100%; 
    float: left; 
}

2012-10-11 14:08:22 Dev

我知道他們正在使用，但有沒有辦法做到這一點普通的CSS？這就是我要問的。 – imp

我不會說那不可能，但這並不容易。正如@ kapser所說：「這是一個漫長而艱難的過程，不必要的方式。」＃ – Dev

@Schart它可能適用於：before和之後：僞元素，但它並不容易。 – surfitscrollit

最好的辦法是使用圖像。你可能可以在canvas元素中做一些高級的Javascript，但這是一個漫長而艱難的，不必要的方式。

該網站使用this image

2012-10-11 14:09:59 kapser

回答