DEV Community

Discussion on: CSS Battle: #4 - Ups n Downs

View post
Collapse
 
gass profile image
Gass • • Edited

Nice battle, it entretained me for a while. This is my solution:

<body>
  <section>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
  </section>
</body>
Enter fullscreen mode Exit fullscreen mode 
body{
  background-color:rebeccaPurple;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
section{
  display:grid;
  grid-template-columns: auto auto auto;
  height:200px;
  width:300px;
}
div:nth-child(even){
  background-color:khaki;
  border-radius:0% 0% 50% 50%;
}
div:nth-child(2){
  transform:rotate(180deg);
}
Enter fullscreen mode Exit fullscreen mode

jsfiddle.net/Gass_snippets/3qoyz48...

Keep it up!

Collapse
 
j471n profile image
Jatin Sharma •

That's also a great solution, keep doing it :)