Belle icon shape in CSS

南楼画角 提交于 2021-01-18 06:58:47

问题


How can I draw this Belle icon shape in CSS only?

enter image description here

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!