< Back to Frontend Friday Folks Index

Bell

Highlighted solution (453 characters)
1 
<div></div>
2 
<style>
3 
  body {
4 
    background: #191919;
5 
    display: grid;
6 
    place-items: center;
7 
  }
8 
  div {
9 
    position:relative;
10 
    width: 120px;
11 
    height: 120px;
12 
    background: #E08027;
13 
    border-radius: 50% 50% 10px 10px;
14 
  }
15 
  body::before {
16 
    content:'';
17 
    position:absolute;
18 
    height:170px;
19 
    width:50px;
20 
    background: linear-gradient(#F2AD43 50%, #824B20 0);
21 
    border-radius: 50px;
22 
    top: 65px;
23 
    left: 175px;
24 
  }
25 
</style>
That was fast and fun to work on. I learned that I can use body::before to get rid of an extra z-index if I'd used a div::before...!
< Back to Frontend Friday Folks Index