< Back to Frontend Friday Folks Index

Ice Cream

Highlighted solution (737 characters)
1 
<div id="y"></div>
2 
<div id="r"></div>
3 
<style>
4 
  body {
5 
    background: #293462;
6 
    display: grid;
7 
    justify-items: center;
8 
    place-content: center;
9 
  }
10 
  #y {
11 
    width: 100px;
12 
    height: 150px;
13 
    background:
14 
      radial-gradient(circle at 50% 50px, #FFF1C1 50px, transparent 0),
15 
      radial-gradient(circle at 20% 130px, #FFF1C1 20px, transparent 0),
16 
      radial-gradient(circle at 80% 130px, #FFF1C1 20px, transparent 0),
17 
      linear-gradient(#293462 50px, #FFF1C1 0 130px, transparent 0),
18 
      linear-gradient(90deg, transparent 20px, #FFF1C1 0 80px, transparent 0)
19 
    ;
20 
  }
21 
  #r {
22 
    width: 30%;
23 
    height: 50px;
24 
    background: linear-gradient(#A64942 10px, #FE5F55 0);
25 
    border-radius: 0 0 10px 10px;
26 
  }
27 
</style>

While we can do the popsicle and the stick with border radius, the presented solution shows another way, how to solve this. By using multiple backgrounds, stacked on top of each other, it's possible to create the same effect with gradients.

The <div id="r"> shows the border-radius approach and the <div id="y"> is all about using gradients to draw.

MDN has a great explanation for using multiple backgrounds.
< Back to Frontend Friday Folks Index