带有圆角和非常浅椭圆形状的CSS3图像

Question

Hello I'm looking to build in CSS3 an image with round corners and a very light oval shape, like in this pic.

Not sure if it's possible and how. I know how to build a round image or an image with round corners, but this is a little different.

UPDATE Here is what I've done

.round{
    background-color:red;
    width:100px;
    height:100px;
    border-top-left-radius: 45px 40px;
    border-top-right-radius: 45px 40px;
    border-bottom-left-radius: 45px 40px;
    border-bottom-right-radius: 45px 40px;
}

http://jsfiddle.net/7t1z3hxf/9/

UPDATE2 Here are the schematics of what I'm trying to achieve

Thanks

Answer 1

If perfect precision is what you want, I recommend mask-image instead of border-radius . It's much better suited for what you want.

To use your Illustrator-built(?) shape as a mask in CSS, export it as SVG or PNG with transparent bg.

This will work in Chrome, Safari and Opera, but you need to use the prefixed -webkit-mask-image . The property is in progress of being merged with CSS mask-image which only applied to SVG, hence the current need for a prefix. For other browsers, you may choose the lesser precise border-radius .

.round{
 -webkit-mask-image: url(yourshape.png);
 -webkit-mask-size: contain;
 -webkit-mask-position: center center;
 /* ... border-radius as fallback */
}

Learn more about CSS Masking and browser support.

Answer 2

Adapted from Here

If it's note exactly what you are looking for, I can mess with the border radii and round it or flatten it.

 #round { position: relative; width: 100px; height: 100px; margin: 20px 0; background: orange; border-radius: 48% / 25%; color: white; } #round:before { content: ''; position: absolute; top: 10%; bottom: 11%; right: -5%; left: -5%; background: inherit; border-radius: 21% / 68%; } 

 <div id="round"></div> 

Answer 3

If I understood right you want something like this.

HTML:

<DIV CLASS="TEST"></DIV>

CSS:

.TEST{
   width:230px;
   height:240px;
   background-image:url(IMAGE.JPG);
   border-radius:100px;
   background-position:center center;
   background-size::230px 240px;
 }

You may change the values to get the desired position.