Расположение рисованных кругов CSS

545

24 ноября 2016, 10:18

Есть стиль, выглядит так, нужно сделать, чтобы круги располагались в шахматном порядке, как на картинке. Нужно замостить так весь бэкграунд.

<style>
body{
background: radial-gradient(circle, #ff72f7 40%, rgba(255,114,247,0) 40%) 100px 100px;
background-color:white; background-size:250px 250px;
}
</style>

Answer 1

body {
   background: radial-gradient(circle, #ff72f7 30%, rgba(255,114,247,0) 30%), radial-gradient(circle, #ff72f7 30%, rgba(255,114,247,0) 30%) 125px 125px;
   background-color:white; 
   background-size: 250px 250px;
}

Для размещения в шахматном порядке размер для background = background-size/2