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

Question

我正在尝试将冰淇淋蛋筒创建为 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;
 }