css-shapes

I've used border-radius: 50% or border-radius: 999em , but the problem is the same: with squared images there's no problem, but with rectangular images I obtain an oval circle. I'm also disposed to crop a part of the image (obviously). Is there's a way to do that with pure CSS (or at least JavaScript / jQuery), without using a <div> with a background-image , but only using the <img> tag? I presume that your problem with background-image is that it would be inefficient with a source for each image inside a stylesheet. My suggestion is to set the source inline: <div style = 'background-image:

How do I create a CSS shape in which each side is transformed separately. Something like the shape in the below image. Is that possible using CSS only without images? I don't think there is any way in CSS to pick and transform each side separately but you can achieve the shape in question by using perspective transforms (pure CSS). Rotating the element with perspective along both X and Y axes sort of produces the effect of each side having a separate transformation. You can adjust the angles and the perspective setting to create the shape exactly as required. .shape { background: black; margin

I need to create a CSS shape like this image.. Please check this fiddle of my work I have created something like that, but I cannot give a curve to it. #shape { border-left: 70px solid transparent; border-top: 100px solid red; height: 0; width: 200px; } Can anyone help me? You can use a pseudo element with border-radius and background-shadows to create the curve and enable a transparent background for the curve. Output : #shape { width: 300px; height: 100px; position: relative; overflow: hidden; } #shape:before { content: ''; position: absolute; top: 10%; right: 0; width: 300%; padding-bottom:

I need to create button with triangle on one side (like this http://css-tricks.com/triangle-breadcrumbs/ ) with linear vertical gradient and border, and I want to use pure CSS3. It's ok if I need 45deg "triangle", I just write smth like this .button:after { -webkit-transform: rotate(45deg); background: -webkit-linear-gradient(-45deg, #fff, #000); content: ''; width: 2em; height: 2em; display: block; } and hide half of that pseudo-element under .button (so only another half of it is visible, like a triangle). But if I need another angle (e.g. more steep) - I can't make it with standart XY

I tried a lot on oval shape which have cut in both sides but not able to do it please I need code for oval shape with cut in both side.. Here's my code below:- .demo{ width: 100%; height: 600px; background: white; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 178px; border-radius: 694px / 208px; z-index: 100; position: relative; } Is this OK ? HTML <div id="oval_parent"> <div id="oval"></div> </div> CSS #oval_parent{ background:black; width:200px; height:120px; overflow:hidden; } #oval{ width: 220px; height: 100px; margin:10px 0 0 -10px; background: white; -moz-border-radius

IS it possible, I know all the following shapes are possible in this link: http://css-tricks.com/examples/ShapesOfCSS/ but cross must be possible too. When I say cross I mean like this: You could achieve something like this with pseudoelements only: http://jsbin.com/upiyoc/1/edit #cross { width: 100px; height: 100px; position: relative; } #cross:before, #cross:after { content: ""; position: absolute; z-index: -1; background: #d00; } #cross:before { left: 50%; width: 30%; margin-left: -15%; height: 100%; } #cross:after { top: 50%; height: 30%; margin-top: -15%; width: 100%; } The size of the