css-shapes

I want to create two divs with the background white shape depicted below. As you can see it's basically a rectangle and a ellipse-shape being cut out. It should be able to produce a box-shadow. Is there a way to achieve this with css only? I have used 2 div's with box-shadow i have added border for understanding body { background:url(https://placeimg.com/640/480/any); } .out { width: 455px; height: 275px; border: 1px solid red; position: relative; overflow: hidden; margin: 20px; } .in { width: 550px; height: 550px; border: 1px solid green; position: absolute; left: 200px; border-radius: 50%;

Is it possible to create the curved sail shape below using HTML and CSS only? I can see from this answer that I could create a straight-sided sail using: #triangle { width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 100px solid red; } which looks like: or I can get a bit closer with border radius: #sail { background: #ff0000; width: 50px; height: 100px; border-top-right-radius: 50px 100px; -moz-border-radius-topright: 50px 100px; -webkit-border-top-right-radius: 50px 100px; -khtml-border-radius-topright: 50px 100px; } which looks like this: but isn't quite as elegant as

As you might have guessed this image is part of a mail envelope shape which I would like to create with CSS3 if possible. I've made the other parts but this one's tricky. The shape needs both a triangular cut on both sides and rounded corners (presumably border-radius-bottom-left/border-radius-bottom-right). It also has to have the ability to cast a small shadow. This is what I've done so far - #envelope { background: #fff; } .closed { width: 860px; height: 0; border-top: 80px solid fff; border-left: 50px solid transparent; border-right: 50px solid transparent; -moz-box-shadow: 0 1px 5px #ccc;

I have been trying to make this shape in CSS. Ideally it will span the entire length of the browser window and probably extend outside the field of view to support larger screens and also be centered so that the angle does not change. Anyone have any solutions? Also I think I might run into a problem of the angle aliasing harshly. I might need to resort to using an image. Would like to use CSS though. ** Image Spelling Error. (Indefinitely not Inevitably) A solution that doesn't require CSS3 support: jsfiddle demo HTML <div class="shape"> <div class="top"></div> <div class="bottom"></div> <

How do I draw a horizontal line in between 2 circles in CSS? It has to be in the middle of them just as shown in the screenshot. Example here: I have drawn the 2 circles, but don't know how to connect them. #status-buttons a { color: black; display: inline-block; font-size: 17px; font-weight: normal; margin-right: 0; text-align: center; text-transform: uppercase; min-width: 150px; text-decoration: none; } #status-buttons a:hover { text-decoration: none; } #status-buttons a.active span { color: white; background: #ACCF5B; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; } #status-buttons span

I'm trying to make a CSS button . As you can see below, I'm not able to create a gradient for the second HTML-element for the corners. Normally I would use borders or simply rotate a element to create a triangle with a gradient, but the problem is that my triangle isn't a 90 degree square. Desired design: (Grayscale, retina 200% zoomed) My CSS button: (Blue, retina 200% zoomed) Is there a better way to create this button with CSS? http://jsfiddle.net/G8ZBz/ or simply read below: HTML-code <div class="button"> <div class="button-inside"></div> </div> CSS .button { width: 225px; height: 60px;