创建没有border-radius的圆角块

时间:2014-03-04 13:35:18

标签: javascript jquery html5 css3 web

我创建了自己的网站,我无法理解如何正确创建圆角块(请参见图片中的红色矩形:https://dl.dropboxusercontent.com/u/43315655/planeto-template.jpg

此块将显示在不同的屏幕上(从960像素到高清)。我曾尝试使用border-radius,但这是错误的。

请帮助我提供任何链接,建议或代码示例:)

2 个答案:

答案 0 :(得分:2)

您发布的图片是HTML模板。如果他们这样做了,你认为这不可能吗?

是的,只是在左下角和右下角放置一个边框。一个值为100%,另一个值是您希望曲线停止的高度:

border-bottom-right-radius : 100% 100px;
border-bottom-left-radius : 100% 100px;

小提琴:http://jsfiddle.net/yqf9a/1/

答案 1 :(得分:0)

我不太确定你对border-radius有什么不了解,但是W3C Wiki解释了border-radius属性的使用非常好:http://www.w3schools.com/cssref/css3_pr_border-radius.asp

还可以尝试CSS Border Radius Generator:http://border-radius.com/