用css画个苦无

效果图

苦无

首先将布局进行拆分

拆分图

3.png

由四部分组成
苦无头(上)
苦无头(下)
苦无握把
苦无指环

苦无头(上):一个尖头朝上的三角形
苦无下(上):一个尖头朝下的三角形
苦无握把:多个圆角矩形
苦无指环:一个带有渐变色的圆环

三角形怎么画?
将元素宽度设置为0,用border撑起宽高,我们来看下效果`

3 (2).png

如上图所示,我们想得到一个三角形只需要将:三边border的颜色设置为transparent

       .top {
            width: 0;
            margin: 0 auto;
            border-top: 0px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 200px solid transparent;
        }

三角形没问题了我们就可以完成苦无头
苦无指环是一个环形渐变

round为圆型容器,centerRound为圆环空白区,放置在round中间就形成了一个圆环,再给round加一个渐变的伪类after
苦无指环就完成了