A Simple Ice Cream Cone With CSS

March 17, 2020

Ice Cream CSS

The ice cream part is composed of two shapes, a big circle and a wide oval. The oval overlaps the the bottom of the main ice cream circle to give the illusion that it’s spilling over the cone.

<div class="icecream"></div>
.icecream {
  background-color: #7ac5be;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
}

.icecream::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0px;
  height: 30px;
  background: #7ac5be;
  width: 100px;
  border-radius: 100%;
  z-index: 2;
}

Cone CSS

A 2d ice cream cone is really just an isosceles triangle. We can create a triangle in CSS by removing the height and width and creating thick borders on the left, right, and top.

<div class="cone"></div>
.cone {
  margin-top: -20px;
  height: 0px;
  width: 0px;
  border-right: 45px solid transparent;
  border-left: 45px solid transparent;
  border-top: 140px solid tan;
  z-index: 1;
}