2015-08-15 79 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