原文链接： www.lesscake.com/cheeseburge…
我喜欢用奇怪的编程思想挑战自己。 这是一个获得乐趣和学习新东西的好方法。 这次的挑战是用空的div在CSS上画奶酪汉堡。
经过大量的实验和错误，我最终得到了这个。
这可能不是史上最好的汉堡，但对我来说印象最深。 这说明我们有可能用div画出这种复杂的东西。
在本文中，我们将一步一步地做这个奶酪汉堡。
HTML
HTML非常短。 字符集、标题、CSS文件的链接和div。
！ doctypehtmlhtmlheadmetacharset=“utf-8”titlecheesburger/titlelinkrel=“style sheet”href=“style.CSS”/head bs此处
CSS
汉堡的基本CSS可能是这样的。
. burger {/*复制包含汉堡所有部分*/*包子、奶酪、肉、生菜、芝麻* /}的代码，但这很有限，所以在一个选择器内安装整个汉堡是不可能的要找到更多的空间，必须使用： before和： after伪元素。
. burger { /*奶酪、肉、生菜*/}.burger:before { /*面包*/}.burger:after { /*芝麻*/}代码看起来不多
面包圈
小圆面包由两部分组成。 楼上和楼下。 因此，需要找到一种在一个CSS选择器中绘制两个不复杂的不同形状的方法。
首先，使用border属性绘制两个矩形。
. burger : before { content : ' }； 显示：块； /*2片面包可视距离*/width: 400px； height: 55px； /*上层平移*/border-top :80 px solid # f5b 230； /*下层平移*/border-bottom 336050 px solid # f5b 230； }复制代码
然后用border-radius经常弯曲面包。
. burger:before { /*与以前相同的代码*/content: ' '； 显示：块； width: 400px； height: 55px； border-top :80 px solid # f5b 230； border-bottom 336050 px solid # f5b 230； /*新内容*/Border-Radius3360300 %； }复制代码
佐料
接下来，添加奶酪、肉和生菜这些主要的汉堡包佐料。 这次需要将三种形式放入一个CSS选择器中。
现在就把重点放在肉上。
. burger { /*大小*/width: 380px； height: 40px； /*颜色和形状*/background-color: #681f24； border-radius: 15px； }复制代码
嗯，那不好。 有肉，但没有在正确的位置。 遗憾的是，不能使用margin或padding来解决这个问题。 因为它不仅会动牛排，还会动整个汉堡。
试试和那个不同的东西吧。 用box-shadow画肉。
. burger {/*我刚删除了和以前一样的* //*背景色*/width: 380px； height: 40px； border-radius: 15px； /*新内容*/*参数左外边距、上外边距、颜色*/box-shadow 336010 px 85px # 681 f24； }复制代码
这样就可以了！ 但是，我们面临着另一个问题。 如何向同一个CSS选择器中添加奶酪和生菜？ 要解决这个问题，需要确认两件事：
肉、奶酪、生菜只要颜色不同，形状也可以相同。 在CSS中，您可以根据需要使用尽可能多的盒阴影。 所以.我们只需要增加更多箱子的阴影！
. burger { /*和以前一样的代码*/width
: 380px; height: 40px; border-radius: 15px; /* 新的盒子阴影 */ box-shadow: 10px 50px #fddb28, /* 奶酪 */ 10px 85px #681f24, /* 肉类 */ 10px 120px #82af15; /* 生菜 */}复制代码
请注意，阴影的顺序很重要，因为第一个阴影的顺序靠前，会出现在其他阴影的前面。
芝麻
我们的汉堡正在形成，但它目前看起来很像热狗。我们应该通过在顶部面包中添加一些芝麻来解决这个问题。
首先，我们用 box-shadow 画一粒芝麻。
.burger:after { content: ""; display: block; /* 尺寸和形状 */ width: 10px; height: 6px; border-radius: 40%; /* 位置和颜色 */ box-shadow: 100px -165px #ffffff;}复制代码
然后我们通过使用许多框阴影复制它。
.burger:after { /* 保持之前的代码 */ content: ""; display: block; width: 10px; height: 6px; border-radius: 40%; /* 添加新的盒子阴影 */ box-shadow: /* 顶行 */ 100px -165px #ffffff, 160px -165px #ffffff, 230px -165px #ffffff, 290px -165px #ffffff, /* 底行 */ 60px -135px #ffffff, 125px -135px #ffffff, 190px -135px #ffffff, 255px -135px #ffffff, 330px -135px #ffffff;}复制代码
更好看的奶酪
如果我们能让奶酪看起来更像奶酪就更好了。例如，通过显示奶酪切片的一个角。这意味着即使已经使用了所有 CSS 选择器，我们还要画一个新的图形（一个黄色的三角形）。
如果我们仔细查看我们的代码，我们会注意到目前为止我们还没有使用 content 属性。让我们看看当我们在其中添加字符 ▾ 时会发生什么。
.burger:before { /* 改变 content 标签 */ content: "▾"; /* ▾ 的颜色和尺寸 */ color: #fddb28; font-size: 120px; /* 其他保持相同 */}复制代码我们确实显示了一个新图形，这次我们同样不能使用 margin or padding 来解决这个问题。
但是通过一些 CSS 技巧，我们将完成它。
.burger:before { /* 在三角形前添加八个空格 */ content: " ▾"; /* 空格会显示在 content 中*/ white-space: pre; /* 垂直放置 ▾ */ line-height: 25px; /* 保持其他不变 */}复制代码
现在我们完成了我们的芝士汉堡。
彩蛋
当我给朋友发送关于我这次挑战的邮件时，她回答了这个聪明的答案。
.burger:before { content: "?"; font-size: 100px;}复制代码这样可以减少 CSS，从而获得更好的效果。
结论
我用单个 div 和一些 CSS 设法实现的目标给我留下了深刻的印象。 当然使用 SVG 会更有意义，但那里的乐趣在哪里呢？