一个DIV的芝士汉堡制作

项目Github地址:点击跳转

最近看到了一篇英文文章,正好看看看着也饿了,打算自己好好做一个这样的芝士汉堡,品尝一下芝士汉堡的乐趣

那么绘制如下

html绘制非常简单

由于汉堡包含内容比较多,我们想在一个div上绘制汉堡的话,会想到用伪类来扩大我们的绘制面积,废话不多说,基本构造如下

.cheeseburger{
    
}

.cheeseburger::before{
    
}

.cheeseburger::after{
    
}

绘制上下两层面包,我们采用border绘制

.cheeseburger::before{
    content: '' ;
    display: block ;

    width: 300px;
    height: 60px;

    border-top: 90px solid #F5B231;
    border-bottom: 60px solid #F5B231;

}

用border-radius设置圆角

 border-radius: 30% 30% 20% 20%;

接下来我们做肉

.cheeseburger{
    width: 280px;
    height: 40px;
    background-color: #962012;
    border-radius: 15px;   
}

但是肉的位置并不是我们想要的,想要移动我们采用margin和padding,但是这样会使我们整个汉堡都移动,此时我们采用box-shadow;

    box-shadow: 10px 100px #962012;

接下来我们用同样阴影的方式将奶酪和生菜添加上

    box-shadow: 
    10px 70px #fddb28,
    10px 90px #1EE154,
    10px 120px #962012;

大体已经成型,我们在撒点芝麻,同样采用box-shadow

box-shadow: 
 
 55px -200px #ffffff,
 105px -200px #ffffff,
 155px -200px #ffffff,
 205px -200px #ffffff,
 245px -200px #ffffff,

 
 25px -160px #ffffff,
 75px -160px #ffffff,
 125px -160px #ffffff,
 175px -160px #ffffff,
 225px -160px #ffffff,
 270px -160px #ffffff;

至此汉堡已经成型,可以给奶酪加点流下来的效果

    content: '  ' ;
    color: #fddb28;
    white-space: pre;
    font-size: 45px;
    line-height: 45px;

结束!