css-shapes

I'm trying to create a mix between an oval and a semi-circle. Semi-circles can be created as such in CSS: .halfCircle{ height:45px; width:90px; border-radius: 90px 90px 0 0; -moz-border-radius: 90px 90px 0 0; -webkit-border-radius: 90px 90px 0 0; background:green; } And ovals can be made like this: .oval { background-color: #80C5A0; width: 400px; height: 200px; margin: 100px auto 0px; border-radius: 200px / 100px; } But how can I make a semi-oval? Here's my attempt so far. The problem that happens is I've got flat tops, found here . Thanks! I've updated your demo with one possible solution:

I have a div element with a triangle-border and I'm trying to place an image above it using an ::after pseudo-element with background-image . The method doesn't work though. However if I'm trying to set content: "asd"; , the text appears correctly. Basically I just want to have a house image above that triangle. Here's the HTML code: <div id = "estatecorner" class = "house"></div> And here's the CSS: #estatecorner { position: absolute; right: 0px; width: 0; height: 0; border-style: solid; border-width: 0 80px 80px 0; border-color: transparent #67b2e4 transparent transparent; } #estatecorner

I'm using bootstrap, trying to make a div have a CSS triangle before it. http://jsfiddle.net/B2XvZ/11/ Here is my non-working code: .d:before { width: 0px; height: 0px; border-style: solid; border-width: 10px 15px 10px 0; border-color: transparent #dd4397 transparent transparent; } The way I'd like it to look is for there to be a pink left-pointing triangle right before the text "this", with no gap between it and the div. I've tried to do this by floating the elements also, with no success. You need to specify the content property. For positioning, add position:relative to the parent, and then

I'm trying to achieve the following container in CSS3. I tried with transform: skewY but i don't have the desired result. I know that I can achieve it with 3d Transforms, but I have in mind our lovely Internet Explorer. Also I tried to play with pseudo elements but I lost it. Is there any css rule that I can, lets say, increase the height of the top and bottom right corners? JSFiddle Thank you You could use skewed pseudo elements for this (ensuring the skews are on the pseudos, and not the element itself): div { position: relative; height: 200px; width: 80vw; margin: 10vw; } div:after {

Is there any way to make custom scoop border style in CSS or jQuery? Like the image below: Here's a fiddle ... http://jsfiddle.net/zjw3pg2e/5/ Does this work for you? body { background: #D8D8D8; } .corner { background:white; height:20px; width:20px; position:absolute; } #sw { left: -2px; bottom: -2px; border-radius: 0px 20px 0px 0px; border-top: 2px solid white; border-right: 2px solid white; background:#D8D8D8; } #se { right: -2px; bottom: -2px; border-radius: 20px 0px 0px 0px; border-top: 2px solid white; border-left: 2px solid white; background:#D8D8D8; } #nw { left: -2px; top: -2px; border

For my online game UI, I decided to make Hill Climb Racing (Android Game) 's buttons. This is is what I have presently : body { color: white; font-family: Impact, fantasy; font-size: 40px; line-height: 100px; text-align: center; } .rect { height: 100px; width: 280px; background: #545D60; border-radius: 20px 50px 50px 20px; position: relative; } .rect:before { background: #545D60; content: ""; position: absolute; top: 6px; left: 195px; height: 0px; width: 0px; border-radius: 30px 10px; border: 44px solid #545D60; transform: rotate(45deg); } <div class="rect">NEXT</div> The problem lies with