@handsome 率先开启了本周疯狂星期四
,那作为大帅哥的迷弟,不能丢份~
效果图
不是具体的像,我故意加了点抽象进去~都是手法
小知识
没有新东西,依旧是 box-shadow
复制图形的练习
具体参见 【CSS艺术】送您一台相机,让美好定格!
上代码
HTML
<!-- 真的只有一个div -->
<div></div>
CSS
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: grid;
place-items: center;
background: #ffffe1;
}
/* 主体 */
div {
height: 80px;
width: 200px;
/* 上半部分 */
background-image: linear-gradient(to bottom, #d66425, #fbc34c);
border-radius: 50px 50px 20% 20%;
/* 下半部分 */
box-shadow:
0 5px #ffdf3f, 0 10px #e1432a,
-40px 40px 0 -35px #e1432a, 40px 40px 0 -35px #e1432a,
0 25px #532702, 0 35px #81a833, 0 55px #db6528;
position: relative;
scale: 1.4;
}
/* 溢出奶黄 */
div::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 80px;
left: 40px;
border-top: 15px solid #ffdf3f;
border-left: 100px solid transparent;
border-right: 50px solid transparent;
}
/* 芝麻与菜叶 */
div::after {
--g: #81a833;
content: '';
width: 15px;
height: 15px;
position: absolute;
top: 105px;
left: 10px;
color: #feed94;
background-color: var(--g);
border-radius: 100% 3px 100% 3px;
box-shadow:
5px 1px #d66425, 15px 1px var(--g),
25px 1px 0 -1px var(--g), 25px 0 #d66425,
65px 3px 0 -1px var(--g), 160px -1px 0 -1px var(--g),
162px -3px 0 -1px #d66425, 170px -5px 0 2px var(--g),
4px -105px 0 -5px, 20px -103px 0 -5px,
28px -108px 0 -5px, 12px -90px 0 -5px,
38px -105px 0 -5px, 58px -95px 0 -5px,
70px -98px 0 -6px, 75px -105px 0 -6px,
80px -102px 0 -5px, 100px -105px 0 -5px,
110px -105px 0 -5px, 100px -100px 0 -5px,
120px -95px 0 -6px, 88px -88px 0 -5px;
transform: skewX(-10deg)
}
烹制完毕,请自助。 v me
您的每一个点赞 ,都是对大鹅的激励,我会加油的~