Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
790 views
in Technique[技术] by (71.8m points)

html - CSS3 image with round corners and a very light oval shape

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 enter image description here

enter image description here

Thanks

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...