首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用 CSS 3 来做个平安果吧~

用 CSS 3 来做个平安果吧~

作者头像
前端GoGoGo
发布2018-08-24 17:24:37
2980
发布2018-08-24 17:24:37
举报

圣诞将至,我们就用 CSS 3 来做个平安果吧~ 愿所有程序猿和媛们都平安夜不加班~

进入正题,我们要做如下的平安果。思路是把平安果分成几个部分,每个部分的曲线用 border-radius,再加上 transform, clip 之类的 CSS 特性来做。

preview

上面部分

HTML

<div class="apple">
    <div class="top-wrap">
        <div class="top left"></div>
        <div class="top right"></div>
    </div>
</div>

CSS

.apple {
    position: relative;
    width: 172px;
    height: 202px;
}

.top{
    position: absolute;
    top: 0;
    border-radius: 108px/128px;
    width: 108px;
    height: 100%;
    background-color: #e03a3e;
}

.top-wrap{
    position: absolute;
    top: 47px;
    height: 128px;
    width: 100%;
    overflow: hidden;
}

.top.left {
    left: 0;
}

.top.right {
    right: 0;
}

效果如下

step-1

下面部分

HTML

<div class="apple">
    <div class="top-wrap">
        <div class="top left"></div>
        <div class="top right"></div>
    </div>
    <div class="bottom-wrap">
        <div class="bottom left"></div>
        <div class="bottom right"></div>
    </div>
</div>

CSS

.bottom-wrap {
    position: absolute;
    top: 98px;
    height: 104px;
    width: 100%;
    overflow: hidden;
}


.bottom {
    position: absolute;
    background-color: #e03a3e;
    border-radius: 22px 22px 64px 64px/106px 106px 106px 106px;
    height: 106px;
    top: 0;
    width: 64px;
}

.bottom.left {
    transform: rotate(-25deg);
    left: 12px;
}

.bottom.right {
    transform: rotate(25deg);
    right: 12px;
}

效果如下

step-2

填充中间部分

HTML

<div class="apple">
    <div class="top-wrap">
        <div class="top left"></div>
        <div class="top right"></div>
    </div>
    <div class="bottom-wrap">
        <div class="bottom left"></div>
        <div class="bottom right"></div>
    </div>
    <div class="middle"></div>
</div>

CSS

.middle{
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    height: 145px;
    width: 70px;
    background-color: #e03a3e;
}

效果如下

step-3

修饰一下头尾的曲线

HTML

<div class="apple">
    <div class="top-wrap">
        <div class="top left"></div>
        <div class="top right"></div>
    </div>
    <div class="bottom-wrap">
        <div class="bottom left"></div>
        <div class="bottom right"></div>
    </div>
    <div class="middle"></div>
    <div class="bottom-radius"></div>
    <div class="top-radius"></div>
</div>

CSS

.bottom-radius,
.top-radius {
    position: absolute;
    background-color: #e03a3e;
    left: 50%;
    transform: translateX(-50%);
}

.bottom-radius {
    position: absolute;
    border-radius: 50%;
    height: 22px;
    top: 192px;
    width: 48px;
    background-color: #fff;
}

.top-radius {
    top: -26px;
    border-radius: 20px;
    height: 80px;
    transform: translateX(-50%) rotate(-45deg) scale(0.9);
    width: 80px;
    background-color: #fff;
}

效果如下

step-4

平安果柄

HTML

<div class="apple">
    <div class="handle"></div>
    <div class="top-wrap">
        <div class="top left"></div>
        <div class="top right"></div>
    </div>
    <div class="bottom-wrap">
        <div class="bottom left"></div>
        <div class="bottom right"></div>
    </div>
    <div class="middle"></div>
    <div class="bottom-radius"></div>
    <div class="top-radius"></div>
</div>

CSS

.handle {
    position: absolute;
    z-index: 100;
    left: 122px;
    top: -22px;
    transform: rotate(40deg);
    background-color: #62bb47;
}

.handle:before,
.handle:after {
    background-color: #62bb47;
    border-radius: 50%;
    content: "#";
    display: block;
    height: 90px;
    position: absolute;
    text-indent: -9999px;
    width: 90px;
}

.handle:before {
    clip: rect(0 13px 80px 0px);
}

.handle:after {
    clip: rect(14px 100px 76px 76px);
    left: -64px;
}

完成啦~

done

完整代码


本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015.12.22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 上面部分
  • 下面部分
  • 填充中间部分
  • 修饰一下头尾的曲线
  • 平安果柄
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档