Source : https://codepen.io/CrocoDillon/pen/trFam.
A noter: par rapport au Codepen où .circle à les propriétés width: 10%; et padding: 5% 0;, mettre width: 100%; et padding: 50% 0; (comme dans le code ci-dessous) rend les cercles parfaitement fluides. Ils s’adaptent au container.
|
1 2 3 4 5 |
<div class="responsive-circle"> <div class="responsive-circle-content"> <i class="iconfont">[P]</i> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.responsive-circle { position: relative; width: 100%; height: 0; padding: 50% 0; margin: 0 auto; border-radius: 50%; background: pink; &-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; &:before { content: ""; vertical-align: middle; display: inline-block; width: 0; height: 100%; } // span { // vertical-align: middle; // display: inline-block; // } } } |