利用css的伪元素before、after实现蒸锅

阅读《CSS3艺术》练习codepen.io

<figure class="steamer">
  <div class='lid'></div>
  <div class='pot'></div>
</figure>

/*设置全局样式*/
html,body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: pink;
  height: 100%;
  margin: 0;
}
/*设置白色背景，圆形容器, 作为蒸锅背景*/
.steamer {
  width: 30em;
  height: 30em;
  border-radius: 50%;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
/* 紫色锅身 */
.pot {
  width: 16em;
  height: 12em;
  background-color: darkslateblue;
  border-radius: 0.5em 0.5em 6.5em 6.5em;
  border-right: 1.5em solid midnightblue;
  position: relative;
}
/* 绘制锅身把手，一个长条，置于锅身下层*/
.pot:before {
  content: "";
  position: absolute;
  width: 27em;
  height: 2.5em;
  background-color: tomato;
  border-radius: 1.25em;
  left: -4.75em;
  top: 1em;
  z-index: -1;
}
/*绘制锅盖*/
.lid {
  width:17em;
  height:6em;
  background-color: gold;
  border-radius: 6em 6em 0 0;
  border-right: 1.5em solid goldenrod;
  border-bottom: 1.2em solid goldenrod;
  position: relative;
/*   top: 0.5em; */
  z-index:1;
}
/*绘制锅盖提钮*/
.lid:before {
  content:'';
  position:absolute;
  width:4em;
  height:4em;
  background-color:tomato;
  border-radius:50%;
  left:7em;
  top:-2em;
}

/* 增加光影效果，锅盖和锅身上的白色线条 */

.pot:after {
  content:'';
  width:8em;
  height:8em;
  border:0.6em solid;
  border-color: transparent transparent white transparent;
  position:absolute;
  border-radius: 50%;
  transform: rotate(30deg);
  top:1em;
  left:2em;
}


.lid:after {
  content:'';
  width:7em;
  height:7em;
  border:0.6em solid;
  border-color: transparent transparent  transparent white;
  position:absolute;
  border-radius: 50%;
  transform: rotate(40deg);
  top:1em;
  left:1.5em;
}