enter image description here

Interested in the location of the div in a circle, and especially cross-browser. The link: http://themegret.com/demo/html/egret/ shows that SVG was not used, but it is still not clear to me how the blocks with the contents are located in a circle.

  • Maybe this was done using SVG? - Vlad from Moscow
  • @VladfromMoscow no there seems to be svg: themegret.com/demo/html/egret - user33274
  • 2
    This question should be closed, because it is useless for the knowledge base: searches have (so far) not learned how to extract the meaning of a question from a picture. - aleksandr barakin
  • @alexanderbarakin you can simply edit the question, why close it immediately. - Vadim Ovchinnikov

1 answer 1

All this is done using CSS3 transfrom (including the link you specified). For this, a container is created, in which all children of the same width and height have position: absolute; left: 0; top: 0 position: absolute; left: 0; top: 0 position: absolute; left: 0; top: 0 , that is, they are located one after another. Further, all children are assigned a transform-origin: 50% 200% 0; in order to rotate them around the point which is located under the blocks, and not in the center of all the pictures (default value is 50% 50% 0 ), that is, in our case, the Y-offset is 200% .

enter image description here

Working simple example:

 .container { position: relative; width: 100px; height: 200px; margin: 0 auto; } .container > div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform-origin: 50% 200% 0; } .red { background-color: red; transform: rotate(-60deg); } .orange { background-color: orange; transform: rotate(-40deg); } .yellow { background-color: yellow; transform: rotate(-20deg); } .green { background-color: green; } .lightblue { background-color: lightblue; transform: rotate(20deg); } .blue { background-color: blue; transform: rotate(40deg); } .purple { background-color: purple; transform: rotate(60deg); } 
 <div class="container"> <div class="red"> </div> <div class="orange"> </div> <div class="yellow"> </div> <div class="green"> </div> <div class="lightblue"> </div> <div class="blue"> </div> <div class="purple"> </div> </div>

  • one
    go nuts like simple! thanks - user33274