前言

冰果”同“冰菓”来作为代替“冰棍”,“雪糕”,“冰淇淋”以及所有带有木棍的雪糕的一类名称的说法。

首先呢简单设置一下，左半侧的背景样式 #f0e397，圆角的弧度，以及左半侧的宽高

为方面我们查看效果给左侧添加边距

<div class="ice" />


.ice {
    background: #f0e397;
    border-radius: 15px;
    height: 59px;
    margin-left: 71px;
    position: relative;
    width: 100px
}

我们如何在这个冰果上添加其他的颜色呢？可以通过外边框的形式添加其他颜色的样式呢，

在ice 上面加上边框和下边框高度与ice一致设置两个不同颜色

<div class="ice" />


.ice {
    background: #f0e397;
    border-bottom: 59px solid #9ff0e8;
    border-radius: 15px;
    border-top: 59px solid #f1b600;
    height: 59px;
    margin-left: 71px;
    position: relative;
    width: 100px
}

现在这个多色彩的样式已经出来，在下方添加上木棍即可

这个里面木棍的样式我们采用还是伪类的写法

<div class="ice" />


.ice {
    background: #f0e397;
    border-bottom: 59px solid #9ff0e8;
    border-radius: 15px;
    border-top: 59px solid #f1b600;
    height: 59px;
    margin-left: 71px;
    position: relative;
    width: 100px
}
.ice:before {
    background:  #decba0;
    border-radius: 0 0 50px 50px;
    content: "";
    height: 98px;
    left: 41px;
    margin: auto;
    position: absolute;
    top: 120px;
    width: 20px;
    z-index: -666
}

现在冰果的样式基本上就已完成，但是我们这里又有点新需求，可不可把冰果两侧颜色不同呢？

也就是原来冰果的颜色是第一层#f1d700 第二层#fefac4 第三次 #c6f5f0

现在想把第一层第二层第三层都变成两个颜色

这里我们还是使用伪类，思路就是在ice右半部分进行样式覆盖这样就有达到效果

伪类的写法和ice本身样式采用的思路是一样的都是通过设置上下边框来实现三种不同颜色

<div class="ice" />


.ice {
    background: #f0e397;
    border-bottom: 59px solid #9ff0e8;
    border-radius: 15px;
    border-top: 59px solid #f1b600;
    height: 59px;
    margin-left: 71px;
    position: relative;
    width: 100px
}
.ice:before {
    background:  #decba0;
    border-radius: 0 0 50px 50px;
    content: "";
    height: 98px;
    left: 41px;
    margin: auto;
    position: absolute;
    top: 120px;
    width: 20px;
    z-index: -666
}
.ice:after {
    background:  #fefac4;
    border-bottom: 59px solid #c6f5f0;
    border-radius: 15px 0 0 15px;
    border-top: 59px solid #f1d700;
    content: "";
    float: right;
    height: 59px;
    position: absolute;
    top: -59px;
    width: 50px
}

“我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！”

用CSS做一个多色冰果

前言