html边框倾斜,弯曲的边框CSS实现

要添加边框的元素

曲线的高度

背景颜色

醇>

例如：

curlyBorder(border1, 24, '#073');

curlyBorder(border2, 24, '#037');

HTML：强>

Text 1

Text 2

CSS：(主要用于定义尺寸和颜色)

#border2 {

position:relative;

top:-25px;

}

#border1, #border2 {

width:300px;

height:150px;

padding:30px 16px;

color:#fff;

font:26px sans-serif;

text-align:center;

}

JavaScript的：强>

使用图形生成画布并将其设置为元素背景的函数。代码未经优化。无论如何，它可以扩展到支持渐变，更好的边界线等。为了举例，我把它保持在最低限度：

function curlyBorder(el, ch, color) {

var canvas = document.createElement('canvas'),

ctx = canvas.getContext('2d');

render();

function render() {

var w = el.clientWidth,

h = el.clientHeight,

t = w * 0.333;

canvas.width = w;

canvas.height = h;

/// define border

ctx.moveTo(0, 0);

ctx.lineTo(t, 0);

/// create one curve positive direction

renderCurve(t, ch, 1);

ctx.lineTo(w, 0);

ctx.lineTo(w, h - ch);

ctx.lineTo(w - t, h - ch);

/// create one curve negative direction

renderCurve(t, ch, -1);

ctx.lineTo(0, h - ch);

ctx.closePath();

/// color or gradient

ctx.fillStyle = color;

ctx.fill();

/// set this canvas as background to element

el.style.background = 'url(' +

canvas.toDataURL() + ') no-repeat top left';

/// we use trigonometry to make the curved line:

function renderCurve(t, ch, d) {

var x, sx, ex,dg = -90, dgd = 360 / t, y;

if (d > 0) {

x = t;

for(; x < t * 2; x++) {

y = ch * 0.5 * Math.sin(dg * Math.PI / 180);

ctx.lineTo(x, y + ch * 0.5);

dg += dgd;

}

} else {

x = t * 2;

for(; x > t; x--) {

y = ch * 0.5 * Math.sin(dg * Math.PI / 180);

ctx.lineTo(x, h - ch * 0.5 + y);

dg += dgd;

}

}

}

}

}

这样做的缺点是效率不如CSS，但如果只保留几个元素，性能就可以接受。

您需要调整元素的位置。我用位置相对和偏移对下一个元素进行了硬编码 - 这可以通过其他CSS规则更好地解决(甚至在函数本身中实现)。

从积极的方面来说：在设计可能性方面你有更多的自由，与使用缩放的图像相比，你可以改变尺寸并获得高质量的渲染。

它将在支持画布的所有HTML5浏览器中呈现相同的内容(我认为即使是IE＆lt; 9，exCanvas也可以渲染它，但我还没有检查过。)