is it possible to make CSS Layers shaped like the following image...
是否有可能使CSS层形成如下图…
i know we can have images of this shape and with transparent backgrounds we can have Layers shaped like these... but no i want CSS Layers to actual borders like these shapes... is there a way CSS, jQuery or anything....
我知道我们可以有这个形状的图像和透明的背景我们可以有这些形状的图层…但是不，我想让CSS层像这些形状一样实际的边框……有一种CSS,jQuery或任何....
Note: by 'shapes like these i mean not just these three examples but shapes that i could define'
注意:根据这些形状我的意思不仅仅是这三个例子而是我可以定义的形状
4 个解决方案
#1
5
If you need shapes in HTML then you should embed or generate SVGs. You may want to take a look at Raphaël.
如果需要HTML中的形状，则应该嵌入或生成SVGs。你可能想看看拉斐尔。
Normal HTML and CSS will just render rectangles.
普通的HTML和CSS只呈现矩形。
#2
3
There isn't a direct way to manipulate the shape of a DOM element -- all elements are either rectangular (if they're display:block;) or shaped by their text content (if they're display:inline;).
没有一种直接的方法来操作DOM元素的形状——所有的元素要么是矩形的(如果它们是display:block;)，要么是由它们的文本内容(如果它们是display:inline;)形成的。
The HTML DOM revolves around rectangular boxes, so you're not going to get random shaped boxes using that.
HTML DOM围绕矩形框旋转，所以你不会得到任意形状的框。
It depends exactly what you're trying to do. If all you want to do is draw shapes, then you'd be better off using either canvas, SVG or VML, depending on exactly what you want to do and the browser support you need.
这完全取决于你想做什么。如果您想做的只是绘制图形，那么最好使用canvas、SVG或VML，具体取决于您想做什么，以及所需的浏览器支持。
Canvas is an HTML5 technology which basically gives you a drawing pad in the browser which you can draw on with Javascript. It allows you to create and animate 2D pixel art.
Canvas是一种HTML5技术，它在浏览器中为您提供了一个绘图板，您可以使用Javascript进行绘图。它允许您创建和动画二维像素艺术。
SVG and VML are vector graphic languages. They perform roughly the same task, but VML is specific to Internet Explorer while most other browsers support SVG. (IE9 will support SVG as well, but it's not in widespread use yet). Again you can work with these using Javascript, and the best way to do it in a cross-browser way is to use the Raphael libraray, which gives you an API to create your graphics, and then translates it to VML or SVG behind the scenes according to the browser.
SVG和VML是矢量图形语言。它们执行大致相同的任务，但是VML是特定于Internet Explorer的，而大多数其他浏览器支持SVG。(IE9也支持SVG，但目前还没有广泛使用)。同样，您可以使用Javascript来处理这些问题，最好的跨浏览器方式是使用Raphael libraray，它提供一个API来创建图形，然后根据浏览器将其转换为VML或SVG。
You could also, of course, just have a background graphic for your box in the shape you want with transparent areas outside the shape, and only use the area inside the box. It won't really be a polygonal box, but if you do it right it could look just as good.
当然，你也可以用你想要的形状为你的盒子设置一个背景图形，在它的外部设置一个透明的区域，并且只使用盒子里面的区域。它不会是一个多角形的盒子，但是如果你做对了，它看起来也一样好。
If you really want to do it using CSS - maybe to have a box that other text elements will wrap around smoothly, you're going to struggle. There are a few hacks you can use to achieve these sorts of effects, but none of them are exactly what you're looking for.
如果你真的想用CSS来做它——也许有一个盒子，其他的文本元素将会平滑地环绕，你将会挣扎。你可以使用一些技巧来达到这些效果，但是没有一个是你想要的。
One option may be CSS transforms: This allows you to rotate/skew/etc a box. The down sides are that the box remains box-shaped (so no polygons), and the contents are rotated and skewed as well as the box outline, so may not suit what you're trying to do. Also, it may not work on all browsers, though can be made to work in most cases.
一个选项可能是CSS转换:这允许你旋转/倾斜/等等一个框。它的缺点是盒子仍然是盒状的(所以没有多边形)，里面的东西和盒子的轮廓一样是旋转和倾斜的，所以可能不适合你要做的。此外，它可能不能在所有浏览器上工作，尽管在大多数情况下它可以工作。
It is possible to create boxes with fake diagonal edges by messing around with the border styles. See http://www.cssplay.co.uk/menu/tree.html for a good example. But again, it's not perfect.
可以通过使用边框样式来创建带有假对角线的框。请参见http://www.cssplay.co.uk/menu/tree.html获得一个很好的示例。但是，它也不是完美的。
Other than that, you'll just have to create multiple boxes and position them to get the closest match for the shape you're trying to achieve.
除此之外，您只需要创建多个方框并将它们放置到最接近您要实现的形状的位置。
Hope that helps.
希望有帮助。
#3
2
CSS is a language for styling documents, not giving them semantic structure. Ergo, there is not something known as a "css layer" or "css shape". Objects in your HTML documents, including divs which sometimes are erroneously referred to as "layers", can be given indexes of whether they display in front of or behind other objects, giving the illusion of "layers".
CSS是一种样式化文档的语言，而不是赋予它们语义结构。因此，没有所谓的“css层”或“css形状”。HTML文档中的对象，包括div(有时被错误地称为“层”)，可以获得它们在其他对象前面或后面显示的索引，从而产生“层”的错觉。
And no, there are no objects in and generic HTML documents that may have arbitrary shapes. You may sometimes hack on standard box shapes to do creative things by combining lots of little known shapes such as is done with the slants hack.
不，在通用的HTML文档中没有对象可以有任意的形状。有时你可能会修改标准的方框形状，通过组合许多不太为人知的形状来完成创造性的工作，比如用slants hack完成的形状。
What you might be looking for is something like the new canvas element in HTML5 and the other vector graphic solutions such as SVG that have led up to it.
您可能需要寻找的是类似于HTML5中的新canvas元素和其他矢量图形解决方案，如SVG。
#4
1
You can do the first shape (the parallelogram-type thing) in recent Safari, Chrome, Firefox and Opera via CSS transforms:
通过CSS转换，你可以在最近的Safari、Chrome、Firefox和Opera中做第一个形状(平行四边形的东西):
- http://webkit.org/blog/130/css-transforms/
- http://webkit.org/blog/130/css-transforms/
- https://developer.mozilla.org/En/CSS/Using_CSS_transforms
- https://developer.mozilla.org/En/CSS/Using_CSS_transforms
- (www.opera.com is down at the moment, but you want http://www.opera.com/docs/specs/presto26/css/transforms/)
- (www.opera.com目前已经关闭，但您需要http://www.opera.com/docs/specs/presto26/css/transforms/)
- http://hacks.mozilla.org/2009/06/3d-transforms-isocube/
- http://hacks.mozilla.org/2009/06/3d-transforms-isocube/
Aside from that, no. CSS is all about rectangles.
除此之外,没有。CSS都是关于矩形的。
#1
5
If you need shapes in HTML then you should embed or generate SVGs. You may want to take a look at Raphaël.
如果需要HTML中的形状，则应该嵌入或生成SVGs。你可能想看看拉斐尔。
Normal HTML and CSS will just render rectangles.
普通的HTML和CSS只呈现矩形。
#2
3
There isn't a direct way to manipulate the shape of a DOM element -- all elements are either rectangular (if they're display:block;) or shaped by their text content (if they're display:inline;).
没有一种直接的方法来操作DOM元素的形状——所有的元素要么是矩形的(如果它们是display:block;)，要么是由它们的文本内容(如果它们是display:inline;)形成的。
The HTML DOM revolves around rectangular boxes, so you're not going to get random shaped boxes using that.
HTML DOM围绕矩形框旋转，所以你不会得到任意形状的框。
It depends exactly what you're trying to do. If all you want to do is draw shapes, then you'd be better off using either canvas, SVG or VML, depending on exactly what you want to do and the browser support you need.
这完全取决于你想做什么。如果您想做的只是绘制图形，那么最好使用canvas、SVG或VML，具体取决于您想做什么，以及所需的浏览器支持。
Canvas is an HTML5 technology which basically gives you a drawing pad in the browser which you can draw on with Javascript. It allows you to create and animate 2D pixel art.
Canvas是一种HTML5技术，它在浏览器中为您提供了一个绘图板，您可以使用Javascript进行绘图。它允许您创建和动画二维像素艺术。
SVG and VML are vector graphic languages. They perform roughly the same task, but VML is specific to Internet Explorer while most other browsers support SVG. (IE9 will support SVG as well, but it's not in widespread use yet). Again you can work with these using Javascript, and the best way to do it in a cross-browser way is to use the Raphael libraray, which gives you an API to create your graphics, and then translates it to VML or SVG behind the scenes according to the browser.
SVG和VML是矢量图形语言。它们执行大致相同的任务，但是VML是特定于Internet Explorer的，而大多数其他浏览器支持SVG。(IE9也支持SVG，但目前还没有广泛使用)。同样，您可以使用Javascript来处理这些问题，最好的跨浏览器方式是使用Raphael libraray，它提供一个API来创建图形，然后根据浏览器将其转换为VML或SVG。
You could also, of course, just have a background graphic for your box in the shape you want with transparent areas outside the shape, and only use the area inside the box. It won't really be a polygonal box, but if you do it right it could look just as good.
当然，你也可以用你想要的形状为你的盒子设置一个背景图形，在它的外部设置一个透明的区域，并且只使用盒子里面的区域。它不会是一个多角形的盒子，但是如果你做对了，它看起来也一样好。
If you really want to do it using CSS - maybe to have a box that other text elements will wrap around smoothly, you're going to struggle. There are a few hacks you can use to achieve these sorts of effects, but none of them are exactly what you're looking for.
如果你真的想用CSS来做它——也许有一个盒子，其他的文本元素将会平滑地环绕，你将会挣扎。你可以使用一些技巧来达到这些效果，但是没有一个是你想要的。
One option may be CSS transforms: This allows you to rotate/skew/etc a box. The down sides are that the box remains box-shaped (so no polygons), and the contents are rotated and skewed as well as the box outline, so may not suit what you're trying to do. Also, it may not work on all browsers, though can be made to work in most cases.
一个选项可能是CSS转换:这允许你旋转/倾斜/等等一个框。它的缺点是盒子仍然是盒状的(所以没有多边形)，里面的东西和盒子的轮廓一样是旋转和倾斜的，所以可能不适合你要做的。此外，它可能不能在所有浏览器上工作，尽管在大多数情况下它可以工作。
It is possible to create boxes with fake diagonal edges by messing around with the border styles. See http://www.cssplay.co.uk/menu/tree.html for a good example. But again, it's not perfect.
可以通过使用边框样式来创建带有假对角线的框。请参见http://www.cssplay.co.uk/menu/tree.html获得一个很好的示例。但是，它也不是完美的。
Other than that, you'll just have to create multiple boxes and position them to get the closest match for the shape you're trying to achieve.
除此之外，您只需要创建多个方框并将它们放置到最接近您要实现的形状的位置。
Hope that helps.
希望有帮助。
#3
2
CSS is a language for styling documents, not giving them semantic structure. Ergo, there is not something known as a "css layer" or "css shape". Objects in your HTML documents, including divs which sometimes are erroneously referred to as "layers", can be given indexes of whether they display in front of or behind other objects, giving the illusion of "layers".
CSS是一种样式化文档的语言，而不是赋予它们语义结构。因此，没有所谓的“css层”或“css形状”。HTML文档中的对象，包括div(有时被错误地称为“层”)，可以获得它们在其他对象前面或后面显示的索引，从而产生“层”的错觉。
And no, there are no objects in and generic HTML documents that may have arbitrary shapes. You may sometimes hack on standard box shapes to do creative things by combining lots of little known shapes such as is done with the slants hack.
不，在通用的HTML文档中没有对象可以有任意的形状。有时你可能会修改标准的方框形状，通过组合许多不太为人知的形状来完成创造性的工作，比如用slants hack完成的形状。
What you might be looking for is something like the new canvas element in HTML5 and the other vector graphic solutions such as SVG that have led up to it.
您可能需要寻找的是类似于HTML5中的新canvas元素和其他矢量图形解决方案，如SVG。
#4
1
You can do the first shape (the parallelogram-type thing) in recent Safari, Chrome, Firefox and Opera via CSS transforms:
通过CSS转换，你可以在最近的Safari、Chrome、Firefox和Opera中做第一个形状(平行四边形的东西):
- http://webkit.org/blog/130/css-transforms/
- http://webkit.org/blog/130/css-transforms/
- https://developer.mozilla.org/En/CSS/Using_CSS_transforms
- https://developer.mozilla.org/En/CSS/Using_CSS_transforms
- (www.opera.com is down at the moment, but you want http://www.opera.com/docs/specs/presto26/css/transforms/)
- (www.opera.com目前已经关闭，但您需要http://www.opera.com/docs/specs/presto26/css/transforms/)
- http://hacks.mozilla.org/2009/06/3d-transforms-isocube/
- http://hacks.mozilla.org/2009/06/3d-transforms-isocube/
Aside from that, no. CSS is all about rectangles.
除此之外,没有。CSS都是关于矩形的。