Discussion on: CSS Battle #4 - Ups n Downs

View post

I like to use the body as the wrapper - I set the stage while using it's margin.
Setting flex to 1 made me happy.
Also fun: usage of rotate origin, instead of marging-top: auto

<div></div>
<div></div>
<div></div>

body{
    background:#62306D;
    margin:50px;
    display:flex;
}
div{
    background:#F7EC7D;
    height:50%;
    border-radius:50%50%0 0;
    flex:1;
}
div:nth-child(odd){
    transform:rotate(180deg);
    margin-top:auto;
/* as an alternative to »margin-top: auto«, transform-origin 50% 100%) */
}