css-shapes

i want to seperate 2 floating div's with a slope line, they got different background colors. Example here: HTML markup: <div id="wrap"> <div id="one"></div> <div id="two"></div> </div> i allready tried to rotate them (as u can see in the jsFiddle): #wrap div { -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); -webkit-transform: rotate(20deg); float:left; width:50%; height:200px; } http://jsfiddle.net/F6DgA/ Also i tried smth. with overflow:hidden : http://jsfiddle.net/F6DgA/1/ ( partly corrent, but not very clean solution ) Is there a more easy way (dont

I have a set of codes from the cube created using CSS. However, how do I resize this into a bigger cube (for example, 200px)? I have tried but everytime I try doing it, it goes out of position.. .mainDiv { position: relative; width: 206px; height: 190px; margin: 0px auto; margin-top: 100px; } .square { width: 100px; height: 100px; background: #c52329; border: solid 2px #FFF; transform: skew(180deg, 210deg); position: absolute; top: 43px; } .square2 { width: 100px; height: 100px; background: #c52329; border: solid 2px #FFF; transform: skew(180deg, 150deg); position: absolute; left: 102px; top:

This question already has an answer here: How to make a curved edge hexagon by using CSS 5 answers I want to make a hexagonal shape with border, rounded corners and transparent background in CSS3 like in this image: I can't make this with rounded corners and border. My code is here: #hexagon-circle { position: relative; margin: 1em auto; width: 10em; height: 17.32em; border-radius: 1em/.5em; background: red; transition: opacity .5s; cursor: pointer; } #hexagon-circle:before { position: absolute; width: inherit; height: inherit; border-radius: inherit; background: inherit; content: ''; -webkit

I'm trying to add some css3 styles on an element, basing on an image model. Inside transparent arrow on the left with blue border: Link to image It is possible only with css3 ? with a single element you could do this i have to go to work hope this help <div>Lorem Ipsum</div> the style: div{ width:200px; height:60px; margin:100px; background-color:transparent; color:black; position:relative; text-indent:30px; line-height:60px; box-shadow:inset 20px 0 0 200px white; overflow:hidden; -webkit-box-shadow: inset -164px 0 0 20px white; -moz-box-shadow: inset -164px 0 0 20px white; box-shadow: inset

I've see a lot of threads remotely related that basically suggest CSS triangles in the ::after or ::before pseudos, but none have really panned out. I'm throwing this out to see if anyone has any ideas. I'm looking to create a div with a pointed or pitched top that still maintains a uniform border and box-shadow with the rest of the div. See link for an image of what I'm trying to create: If you dont want to use a image you could do something like this. But working with an image is lot easier in this case. body { background-color: #CCC; } .wrapper { } .outer { width: 0; height: 0; border-style

I want to make only one rounded corner for a triangle but I'm unable to make it. Here is my code : .arrow-left { width: 0; height: 0; border-top: 80px solid transparent; border-bottom: 80px solid transparent; border-right: 80px solid blue; } <div class="arrow-left"></div> I need the corner pointing left to be rounded as shown in this image : Christopher Reid I know this is a little hacky, but I don't think there is an easy way to do this with a single class. All I've done is rotated a box 45 degrees with border-radius:10px and then contained it in another div with width set to the desired