2015-08-15 83 views
-3

我要製作波浪紋border-bottom:1px solid;而不是一條直線。這如何實現?創建一個波浪邊框底線

所以border-bottom樣子:

enter image description here

我想是這樣的:

enter image description here

什麼是實現這一目標的最佳途徑?這是一個jsFiddle

+1

背景圖像,邊界圖像... – Shomz

+1

@Shomz是的,我知道我可以簡單地添加一個背景圖像,但是這會向瀏覽器添加另一個請求,我正在尋找一個沒有圖像的解決方案。 –

+0

你做了什麼努力? –

回答

2

可以使用backgroundborder image,既然你想避免額外的服務器請求,您可以嵌入的base64數據的圖像:

div {height: 100px; background: url(data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAgICAgICAgICAgMDAwMDAwMDAwP/2wBDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCAAUAF8DAREAAhEBAxEB/8QAHAABAAIBBQAAAAAAAAAAAAAAAAUIBwMEBgkK/8QAJRAAAQQDAAICAwEBAQAAAAAAAwIEBQcBBggACRESExQVIRYj/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APfx4FO+iPYJxRyg4XGdAdM1NXu1frjctK6PszfYramhFetY4WNap/UUz9obScj14MaRRsQ6LnKv8T8YznAViL7AuqLdl28bx76zOgtz13L79SQuDsLY4fhisQNiy7Vk1mIPV96hN76P2qOPDqPI4yPQWqcBQIWV4ObKBBOv5v3QT790+g679Z1YxCciAy13ZbV6euCZL+MI1OJN1tMHVNPRrcbpwtSBs0RZFBQPC1OF5J9BhCg6Z9ndH5dr6S4D0roTVGyJR+qwfXldsbs+yNI1kFw7EGV5+6fBSGyHkyNgfRAtf2bZHDlwpIxg+VY+QtBzP3jyn1y5mYClbah5GytRCtdhUZuDGXrboSrnIDpZvWNmUVYDDXLS0kzJ+r8CivosTUy/hQDFGpC1Bb7wHgPAeA8B4HALUq7RLrrzbaps2C/6bQd5iSwe0wP9OYhv6kWYgika/wBTX5CKmmX2IFOfu2chJj4/xXx8+Binn3jblDlKPLHc38607SyXTZm1lJKv9B12A2OfQxZhYNz7RtbVjjZtqf8A6wE4W6knbpyZXyoi1LUpWQsr4DwHgVF6p4Y5p7Hi4hFy6GtO9agb+hWN517Ny9Y9C07OoUkrbYKlu/R3cLYmjPwuBoWULV9hg/SjAnrdyDKhKCr0FTHtP5rPFx1V9MVB3lVjNOY1OodpwjmjegoeNCzMCLeo6d560fZdL3900cYD+2OYq9u+fCwQi5P8+f8A0Dei7p7Gr9i9c9A+qPpNoKNXHJcz3K1sc99Sa+5C6c5jHL2Mg3e+01cL4beR+psADqZXOIwqXBEDWg7cIaLj2mFC3OYPrg9qj0wglIJk35JaCcOyoQpQ2oCv7LZMBmcKxhCVHMEOFZxla0p+VYCCY7T7fuoBM3+s6Rz160KwlAnz+xcCD9g9bmZmWhTGQToWibLoPOtUSimycqw3e7Bvyh5Kn9huEgiN1hlmueBd3g7T0G3ri9gndXQc1XpWD6L0PYrArOoqTlZdmxmmxJDbas5yqeoI3eQndTi3GGc64k2aVNmqcjXgGPsHYx4DwHgPAeA8B4DwHgPAeA8B4H//2Q==) center bottom repeat-x}
<div></div>

(很明顯,圖像需要修剪/修復,但你明白了)

我認爲這個解決方案將是比嘗試更容易使用CSS來構建類似的東西。

+0

這實際上是非常好的,我沒有意識到base64解決方案,謝謝! –

+1

不客氣,實際上base64的字符串比我想象的要長,但是一旦你得到正確的圖像(我拿了你爲這個問題勾畫出來的那個圖像),它就會變得合理。 – Shomz