css-shapes

I am trying to get a wipe up animation to make a circle look like it's filling with water . I've run into two errors, and haven't been able to even tackle the 3rd one: It fills up the wrong way It resets to empty (black) after it has filled * For now, I am using the <img> tags, but I would like to move this effect to body { background-image: } and need some direction on how to do this. What I have tried so far: #banner { width: 300px; height: 300px; position: relative; } #banner div { position: absolute; } #banner div:nth-child(2) { -webkit-animation: wipe 6s; -webkit-animation-delay: 0s;

I'm wondering if I could produce something similar to this with CSS: And I'm also wondering, is this the right place for such a question? I have not tried anything codewise, I've done the brown images with photoshop. Thanks for any help ! This shape (an Isoceles Trapezoid ) can be easily made using CSS3 by rotating a div with a bit of perspective . Explanation The shape is achieved by rotating an absolutely positioned pseudo-element ( .container:after ) along the x-axis with a perspective. We are not rotating the actual container div because it would cause the link (and any other) text inside

I'm trying to replicate the following shape with no success: I'm guessing I'll need some :before and :after pseudo elements along with the following css: #pentagon { position: relative; width: 78px; height:50px; background:#3a93d0; } Harry Using Border Method: You can do it using the below CSS. The shape is obtained by placing a triangle shape at the bottom of the rectangle using :after pseudo element. The triangular part is achieved using border method. .pentagon { height: 50px; width: 78px; background: #3a93d0; position: relative; } .pentagon:after { border: 39px solid #3a93d0; border-top

I've been trying to figure out how to make a custom shape in CSS that visually will look like this: With the property of background:rgba(44, 44, 48, 0.9) and border:6px solid rgba(29, 30, 35, 0.9); My problem is that I cannot find a way to make the top-right and bottom-left border look like the image I provided. Tried the tips on CSS Custom Shape on CSS-Tricks but it doesn't seem to solve the problem as it cannot have background. Any ideas? o.v. Unfortunately you cannot have a pseudo-element added to a pseudo-element (i.e. :after:after{} will not work) - with a complex shape like yours, you

I am using border-radius property to acheive rounded corners. But I am not sure how to get rounded corners of this shape. I tried giving same dimensions from either sides but they just dont give me the exact shape. Am I missing some CSS3 property here. Just wondering if clip css property is the answer. UPDATE: http://jsfiddle.net/YWnzc/136/ Demo #player { margin: 32px; position: relative; width: 400px; height: 250px; background-color: #222; } #inner { transform: rotate(45deg); background-color: silver; width: 100px; height: 100px; top: 20px; left: -50px; position: relative; border-radius: 20px