CSS3 image with round corners and a very light oval shape
Hi, I want to build in CSS3 an image with round corners and a very light oval shape like in this picture.
Not sure if this is possible and how. I know how to create a circular image or an image with round corners, but this is a little different.
UPDATE Here's what I did
.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 diagrams of what I am trying to achieve.
thank
source to share
If you want perfect accuracy, I recommend mask-image
instead border-radius
. This is much better suited to what you want.
To use your Illustrator design (?) Like 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 prefix -webkit-mask-image
. The property is in the process of being merged with CSS mask-image
which only applies to SVG, hence the current need for a prefix. For other browsers, you may choose a less accurate one 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.
source to share
Adapted from Here
If it marks exactly what you're looking for, I can tinker with the border radii in and around 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>
source to share
If I understood correctly, 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 can change the values to get the position you want.
source to share