是否可以仅使用一个div在一个CSS局部中创建2个不同的形状？ [重复]

Question

这个问题已经在这里有了答案：

• 为什么：before和：after伪元素需要'content'属性？ 4个答案

我正在尝试将冰淇淋蛋卷创建为CSS中的单个div绘图，并且不允许更改我的HTML。 我使用框阴影制作了顶部，使用边框制作了圆锥，但是我不知道如何使圆锥和顶部一起出现。

我尝试在圆锥体上使用伪类使它与顶部一起出现，但是我无法让它们一起出现。

#oneDiv{
  background-color: pink;
  height: 100px;
  width: 100px;
  border-radius: 100%;

box-shadow:
  //cherry
  90px -210px 0px -15px red,
  //sprinkles
  35px -170px 0 -40px $lightBlue,
  0px -107px 0 -40px yellow,
  78px -75px 0 -40px orange,
  97px -155px 0 -40px red,
  140px -50px 0 -40px $lightBlue,
  178px -124px 0 -40px $lightBlue,
  147px -175px 0 -40px orange,
  25px -60px 0 -40px blue,
  47px -120px 0 -40px red,
  120px -105px 0 -40px blue,
  185px -72px 0 -40px yellow,
  //ice cream
  90px 0 0px pink,
  170px 0 0 0px pink,
  90px -90px 0 70px pink,;
}


 #oneDiv:before{
    //cone
  background-color: transparent;
  height: 0px;
  width: 0px;
  border-top: 170px solid $lightBrown;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
 }

我正在尝试使锥体部分与顶部一起显示，以便我可以调整锥体的大小以适合顶部。 我得到的实际结果是没有显示锥体本身的任何部分，但没有收到错误消息。

Answer 1

希望这会有所帮助：）

$lightBlue : lightblue;
$lightBrown: brown;

#oneDiv{
  margin-top: 200px;
  background-color: pink;
  height: 100px;
  width: 100px;
  border-radius: 100%;

box-shadow:
  //cherry
  90px -210px 0px -15px red,
  //sprinkles
  35px -170px 0 -40px $lightBlue,
  0px -107px 0 -40px yellow,
  78px -75px 0 -40px orange,
  97px -155px 0 -40px red,
  140px -50px 0 -40px $lightBlue,
  178px -124px 0 -40px $lightBlue,
  147px -175px 0 -40px orange,
  25px -60px 0 -40px blue,
  47px -120px 0 -40px red,
  120px -105px 0 -40px blue,
  185px -72px 0 -40px yellow,
  //ice cream
  90px 0 0px pink,
  170px 0 0 0px pink,
  90px -90px 0 70px pink,;
}


 #oneDiv:before{
    //cone
  content: "";
   display: inline-block;
   z-index: -1;
   position: relative;
   margin-left: 58px;
  background-color: transparent;
  height: 0px;
  width: 0px;
  border-top: 250px solid $lightBrown;
  border-right: 80px solid transparent;
  border-left: 80px solid transparent;
 }