css-shapes

I'm interested if it's possible to create wrapped (or maybe better said twisted) border using CSS. Effect I wanted to achieve is in the picture. Most easiest and neat solution would be to use svg to create the border. #container { position: relative; width: 200px; height: 30px; } #content { text-transform: uppercase; position: absolute; width: 200px; height: 30px; top: 0; text-align: center; line-height: 30px; } <div id="container"> <svg width="200" height="30" viewBox="-1 -2 201 33"> <path d="M0,0 h200 l-15,15 l15,15 h-200 l15,-15z" stroke="black" stroke-width="2" fill="none" /> </svg> <div

Is it possible to fix the hovering on http://jsfiddle.net/2AXhR/ so that the correct triangle is activated on hover instead of its sometimes adjacent one? Sometimes the wrong triangle is activated because each triangle element's bounding area is not actually a triangle, but a rectangle, so even though the cursor may appear to be on top of one triangle, it is actually on top of another one that overlaps and has a higher z-index. <style type="text/css"> .t { position:relative; top:55px; left:5px; } .t div { position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 0 100px

Is it possible to create the following shape as a DIV in CSS . The browser support is not important. You cannot skew an element like this directly, you'll need to use two elements (or generated content) and hide certain overflow to make the flat bottom edge: http://jsfiddle.net/6DQUY/1/ #skew { height: 240px; overflow: hidden; } .skew { background: #000; display: inline-block; height: 300px; width: 500px; margin-top: 100px; transform: skew(-8deg, -8deg); } Note: I removed the cross browser definitions for better readability. UPDATE: This would be a more fluid example which resizes in set

I've found the following CSS in one of the answers here on SO and I was wondering why does it create the desired heart shape: #heart { position: relative; width: 100px; height: 90px; } #heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o

Is there any way to create a sharp flat corner with CSS and HTML? Something like this: ____ / \ | | \____/ Look here. There you find all you need: http://css-tricks.com/examples/ShapesOfCSS/ Edit In case the link goes lost: CSS #octagon { width: 100px; height: 100px; background: red; position: relative; } #octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } #octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border