前言

随着气温的逐步升高，兄弟们肯定都开始囤雪糕。对于喜欢吃冷饮的人来说，在炎热的气温下，一支冰爽的雪糕既能缓解燥热，又能带来无穷的快乐，但是现在这雪糕的价格真贵呀动辄就要大几十块。今天兄弟们可有福了，我为兄弟们带来一款双色梦龙。

左半侧样式

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

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

<div class="ice" />


.ice {
    background: #8c3c22;
    border-radius: 39px 5px 0 50px;
    height: 169px;
    margin-left: 55px;
    width: 60px;
}

现在看起来颜色有点单调，可以添加box-shadow让元素看起来更加立体

<div class="ice" />


.ice {
    background: #8c3c22;
    border-radius: 39px 5px 0 50px;
    box-shadow: 0 6px 0 #65230e;
    height: 169px;
    margin-left: 55px;
    width: 60px;
}

右半侧样式

在这里我们可以不用再创建一个新元素，直接使用ice 伪元素去写右边的部分

<div class="ice" />


.ice {
    background: #8c3c22;
    border-radius: 39px 5px 0 50px;
    box-shadow: 0 6px 0 #65230e;
    content: "";
    height: 169px;
    margin-left: 55px;
    width: 60px;
}
.ice:before {
    background:#65230e;
    border-radius: 22px 41px 52px 3px;
    box-shadow: 0 6px 0 #65230e, 6px 0 0 #8c3c22 inset;
    content: "";
    height: 169px;
    width: 60px
}

写完样式发现页面没有生效，这个是因为两个样式覆盖到一起去了，这里可以通过定位的方式来解决这个问题

<div class="ice" />


.ice {
    background: #8c3c22;
    border-radius: 39px 5px 0 50px;
    box-shadow: 0 6px 0 #65230e;
    content: "";
    height: 169px;
    left: -20px;
    margin-left: 55px;
    margin-right: 85px;
    position: relative;
    width: 60px;
}
.ice:before {
    background:#65230e;
    border-radius: 22px 41px 52px 3px;
    box-shadow: 0 6px 0 #65230e, 6px 0 0 #8c3c22 inset;
    float: right;
    height: 169px;
    left: 45px;
    position: absolute;
    width: 60px;
}

这个时候两侧的样式都出来了，但是中间部分的样式有问题，这里我们先不去处理它

这里想把两侧的样式再调整一下，两侧分别向对应方向做偏移

左侧向x轴偏移-4dg 右侧向x轴偏移8dg

<div class="ice" />


.ice {
    background: #8c3c22;
    border-radius: 39px 5px 0 50px;
    box-shadow: 0 6px 0 #65230e;
    content: "";
    height: 169px;
    left: -20px;
    margin-left: 55px;
    margin-right: 85px;
    position: relative;
    transform: rotate(0deg) skewX(-4deg);
    width: 60px;
}
.ice:before {
    background:#65230e;
    border-radius: 22px 41px 52px 3px;
    box-shadow: 0 6px 0 #65230e, 6px 0 0 #8c3c22 inset;
    float: right;
    height: 169px;
    left: 45px;
    position: absolute;
    transform: rotate(0deg) skewX(8deg);
    width: 60px;
}

最后也通过伪类的形式给雪糕加上木棒

<div class="ice" />


.ice {
    background: #8c3c22;
    border-radius: 39px 5px 0 50px;
    box-shadow: 0 6px 0 #65230e;
    content: "";
    height: 169px;
    left: -20px;
    margin-left: 55px;
    margin-right: 85px;
    position: relative;
    transform: rotate(0deg) skewX(-4deg);
    width: 60px;
}
.ice:before {
    background:#65230e;
    border-radius: 22px 41px 52px 3px;
    box-shadow: 0 6px 0 #65230e, 6px 0 0 #8c3c22 inset;
    float: right;
    height: 169px;
    left: 45px;
    position: absolute;
    transform: rotate(0deg) skewX(8deg);
    width: 60px;
}
.ice:after {
    background: #decba0;
    border-radius: 0 0 50px 50px;
    box-shadow: 0 8px 0 #65230e inset, -10px 9px 0 #c4ad78 inset, 10px -107px 0 #65230e, 10px -174px 0 #65230e, -10px -113px 0 #8c3c22, -10px -173px 0 #8c3c22;
    content: "";
    height: 107px;
    left: 51px;
    margin: auto;
    position: absolute;
    top: 175px;
    transform: rotate(0deg) skewX(4deg);
    width: 20px
}

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