Podobnie jak jak używam border-radius: 50%; to zniekształca to co jest wewnątrz.
Jest na to jakaś rada?
.progress-radial { float: left; margin-right: 22px; position: relative; width: 60px; height: 60px; border-radius: 50%; background-color: #e0d9d0; } /* ------------------------------------- * Optional centered circle w/text * ------------------------------------- */ .progress-radial .overlay { position: absolute; width: 36px; height: 36px; background-color: #fcfaf9; border-radius: 50%; margin:12px; text-align: center; line-height: 20px; font-size: 16px; } /* ------------------------------------- * Mixin for progress-% class * ------------------------------------- */ .progress-0 { background-image: linear-gradient(90deg, #e0d9d0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, #1b7a13 50%, #e0d9d0 50%, #e0d9d0); } .progress-5 { background-image: linear-gradient(90deg, #e0d9d0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #1b7a13 50%, #e0d9d0 50%, #e0d9d0); } .progress-10 { background-image: linear-gradient(90deg, #e0d9d0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #1b7a13 50%, #e0d9d0 50%, #e0d9d0); }