问题
How can I draw this Belle icon shape in CSS only?
I've tried the border-radius on a square element but not getting the exact corners.
回答1:
Well, in order to achieve the exact effect, we cannot rely on a single element even if we use percentage on border-radius
.
So one option could be using two (pseudo-)elements overlapping each other where one of them is rotated by 90deg
:
div {
width: 300px;
height: 300px;
/* Just for demo */
width: 95vmin; height: 95vmin;
position: relative;
}
div:after, div:before {
content: "";
background: teal;
position: absolute;
top: 0;
left: 8%;
right: 8%;
bottom: 0;
border-radius: 50% / 22%;
}
div:before {
transform: rotate(-90deg); /* vendor prefixes omitted due to brevity */
}
<div></div>
回答2:
If you want the exact shape, you'd be better off using SVG. See for example :
<svg version="1.1" height="200" width="200" viewBox="0 0 30 30">
<path d="M15 0 Q0 0 0 15 T15 30 30 15 15 0" fill="#249B57" stroke="none" />
</svg>
This uses a path with Quadratic beziers (Q)
回答3:
Use a border radius with a percentage (%
) unit, rather than a px
unit:
div{
height:300px;
width:300px;
background:tomato;
border-radius: 45%;
}
<div></div>
NOTE
It is safe to say, however, I have only tried to replicate the image depicted in the question, and so may not conform to a shape of a 'belle' in which you have referred to (in which I used to think was a disney character, who would be much harder to replicate in css).
回答4:
Try this fiddle, Demo
.belly{
background: #2AA55F;
width: 200px;
height: 200px;
border-radius: 82px / 83px;
}
来源:https://stackoverflow.com/questions/29623066/belle-icon-shape-in-css