【译】通过css，用一个div做一个芝士汉堡

原文链接：www.lesscake.com/cheeseburge…

我喜欢用奇怪的编程思想挑战自己。这是获得乐趣和学习新事物的好方法。这次的挑战是使用一个空 div 在 CSS 中绘制一个芝士汉堡。

经过大量的试验和错误，我最终得到了这个。

这可能不是有史以来最好看的汉堡，但对我来说是印象最深刻的。这表明我们有可能用一个 div 绘制像这样复杂的东西。

在本文中，我们将一步步制作这种芝士汉堡。

HTML

HTML 非常简短：一个字符集，一个标题，一个 CSS 文件的链接，以及一个 div。

<！DOCTYPE html>
<HTML>
  <HEAD>
    <meta charset =“UTF-8”>
    <TITLE> Cheesburger </ TITLE>
    <link rel =“stylesheet”href =“style.css”/>
  </ HEAD>
  <BODY>
    <div class =“burger”> </ div>
  </ BODY>
</ HTML>

这就是全部了！现在我们将把注意力集中在 style.css 文件上。

CSS

汉堡最基本的 CSS 可能看起来像这样。

.burger {
  / *包含汉堡的所有部分* /
  / *包子，奶酪，肉，生菜和芝麻* /
}

但是这太有限了，我们将无法在单个选择器内安装整个汉堡。要找到更多空间，我们应该使用 ：before 和 ：after 伪元素。

.burger {
  /*奶酪，肉，生菜 */
}

.burger:before {
  /* 面包 */
}

.burger:after {
  /* 芝麻 */
}

这可能看起来不多，但这对我们的目的来说已经足够了。

面包

小圆面包由两部分组成：上面一层和下面一层。所以我们必须找到一种方法在一个 CSS 选择器中绘制 2 个不同的形状，这并不复杂。

我们首先使用 border 属性绘制 2 个矩形。

.burger:before {
  content: ""; 
  display: block;

  /* 两片面包见的距离 */
  width: 400px;
  height: 55px;

  /* 上层面包 */
  border-top: 80px solid #f5b230;

  /* 下层面包 */
  border-bottom: 50px solid #f5b230;
}

然后我们使用 border-radius 来很好地弯曲面包。

.burger:before {
  /* 和之前同样的代码 */
  content: ""; 
  display: block;
  width: 400px;
  height: 55px;
  border-top: 80px solid #f5b230;
  border-bottom: 50px solid #f5b230;

  /* 新内容 */
  border-radius: 30% 30% 20% 20%; 
}

佐料

接下来，我们将添加主要的汉堡佐料：奶酪，肉和生菜。这次我们需要将 3 个形状放在一个 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: 10px 85px #681f24; 
}

这样可行！然而，我们面临另一个问题：我们如何在同一个 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 会更有意义，但那里的乐趣在哪里呢？