Search code examples
csscss-shapes

Is it possible to create 2 different shapes in one css partial using only one div?

I am trying to create an ice cream cone as a single div drawing in CSS and I'm not allowed to change my HTML. I made the top part using box shadows and the cone using borders, but I can't figure out how to make the cone and the top part appear together.

I tried using a pseudo class on the cone to make it appear with the top part but I couldn't get them to show up together. 

#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;
 }

I'm trying to get the cone part to show up along with the top so that way I can resize the cone to fit with the top. The actual results that I am getting is that no part of the cone itself is showing up but I am not getting an error messages.

Solution

  • hope this will help:)

    $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;
 }