今天才知道，border-radius是可以设置两个值的，
CSS属性 border-radius 用来设置边框圆角。当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果。
于是，我用这个特性画了一个鹰嘴：
FireShot Capture 1 - An Anonymous Pen on CodePen - https___codepen.io_anon_pen_PeajdG.png
HTML
<div class="hook"></div>
CSS
.hook{
width:100px;
height:100px;
background:#fff;
border-top:40px solid #000;
border-right:0;
border-bottom:0;
border-left:00px solid #000;
border-bottom-color:#ff0;
border-top-left-radius:80px 60px; /*两个参数，一个纵向半径一个横向半径*/
}
而有了这个鹰嘴后，我们就能画出如下图标了：
FireShot Capture 2 - 一件趣事——用CSS绘制图标.mp4，重拾CSS的乐趣教程-慕课网 - https___www.imooc.com_video_11619.png
MOOC网视频地址：https://www.imooc.com/video/11619
网友评论