如何在CSS中创建这样的角度

Question

...

alt text http://shup.com/Shup/329122/1104381445-My-Desktop.png

我在这里查看http://www.css3.info/preview/rounded-border/，但所有角落都呈圆角状。

Answer 1

Jquery Corner Plugin

  

Corner是一个简单的插件，用于创建圆角（或其他样式）   元素上的角落。

Answer 2

是的，只有CSS可以使用圆形/椭圆形边框。如果你想要其他形状，你将不得不使用图像。

通过滥用边界连接可以获得直线对角线：

<div style="background: gray; height: 100px; width: 200px; position: relative;">
    <div style="height: 1px; width: 1px; border-top: solid gray 20px; border-right: solid white 20px; position: absolute; bottom: -1px; right: 0;"></div>
</div>

不确定这是一个特别好的主意。

Answer 3

改进bobince的想法，使用两个元素，你尝试过使用背景吗？它们允许您粘贴正常的彩色背景以及粘在底部的移动自定义背景：

element {
  background: gray url(cornerImage) no-repeat bottom right;
}

这优于jQuery插件，因为不需要编写脚本（尽可能避免使用脚本）。角图像只是一个有灰色和白色三角形的小方形图像。