Good day. There is a task - to create a block on the background of the gradient (see screenshot, on the left). The dynamic number of elements are located radially on the border of the circle. Hovering over an element is a hover effect. What I coped with (see screenshot, right).

The problem is as follows: the boundary of the circle should be "interrupted" near the icon, the icon should overlap the entire border. How to do it?

I tried to shaman with transparent borders and a background at the icons - it did not work out.

DEMO

<ul class='advantages-circle'> <li class="advantages-circle__element"> <img src='//i.imgur.com/y6KYdvS.png' alt=""> </li> <li class="advantages-circle__element"> <img src='//i.imgur.com/y6KYdvS.png' alt=""> </li> <li class="advantages-circle__element"> <img src='//i.imgur.com/y6KYdvS.png' alt=""> </li> <li class="advantages-circle__element"> <img src='//i.imgur.com/y6KYdvS.png' alt=""> </li> <li class="advantages-circle__element"> <img src='//i.imgur.com/y6KYdvS.png' alt=""> </li> <li class="advantages-circle__element"> <img src='//i.imgur.com/y6KYdvS.png' alt=""> </li> <li class="advantages-circle__element"> <img src='//i.imgur.com/y6KYdvS.png' alt=""> </li> </ul> 
 body { background: rgb(59, 67, 113); background: -moz-linear-gradient(top, rgba(59, 67, 113, 0.9) 0%, rgba(243, 144, 79, 0.9) 99%); background: -webkit-linear-gradient(top, rgba(59, 67, 113, 0.9) 0%, rgba(243, 144, 79, 0.9) 99%); background: linear-gradient(to bottom, rgba(59, 67, 113, 1) 0%, rgba(243, 144, 79, 1) 99%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3b4371', endColorstr='#f3904f', GradientType=0); background-attachment: fixed; } @mixin distribute-on-circle( $nb-items, $circle-size, $item-size) { $half-item: ($item-size / 2); $half-parent: ($circle-size / 2); position: relative; width: $circle-size; height: $circle-size; padding: 0; border-radius: 50%; list-style: none; box-sizing: content-box; > * { display: block; position: absolute; top: 50%; left: 50%; width: $item-size; height: $item-size; margin: -$half-item; } $angle: (360 / $nb-items); $rot: 0; @for $i from 1 through $nb-items { >:nth-of-type(#{$i}) { transform: rotate($rot * 1deg) translate($half-parent) rotate($rot * -1deg); } $rot: ($rot + $angle); } } .advantages { h2 { text-align: center; } &-circle { @include distribute-on-circle(8, 30em, 6em); margin: 5em auto 0; border: 2px solid white; &__element { img { display: block; width: 100%; } } } }

enter image description here

  • pictures don't open in demo - L. Vadim
  • The option to send in one place the designer is not considered? - mJeevas
  • @ L.Vadim is strange, it opens up with me - Embarcadero
  • @mJeevas Too late, everything has been agreed - Embarcadero

1 answer 1

Well, sort of. But mathematics is impossible for me, so I just drove the arc as it happened. If there is a desire to be confused with accurate calculations, then you can see how the coordinates of the arcs in svg are calculated here - http://shpargalkablog.ru/2015/11/svg.html

In short. In order to calculate the parameters of one another, it is necessary to draw 2 rays from the center of the circle passing through points on the circle that limit the arc (ie, select a sector) and find the coordinates of these points (it seems r sin A and r cos A). At these points, we need to construct tangents to the circle (i.e., take the derivative to get the straight line equations). In svg you need to register the coordinates of three points - the point of the beginning of the arc, the point of the end of the arc and the point of intersection of the tangents. Then get the right arc.

 .arc { position: absolute; left: 20px; top: 20px; } .crc { width: 500px; height: 500px; position: absolute; left: 20px; top: 20px; background-color: rgba(255, 0, 0, .3); border-radius: 500px; } div:nth-child(2) { transform: rotate(-30deg); } div:nth-child(3) { transform: rotate(-60deg); } div:nth-child(4) { transform: rotate(-90deg); } div:nth-child(5) { transform: rotate(-120deg); } div:nth-child(6) { transform: rotate(-150deg); } div:nth-child(7) { transform: rotate(-180deg); } div:nth-child(8) { transform: rotate(-210deg); } div:nth-child(9) { transform: rotate(-240deg); } div:nth-child(10) { transform: rotate(-270deg); } div:nth-child(11) { transform: rotate(-300deg); } div:nth-child(12) { transform: rotate(-330deg); } 
 <div class="crc"></div> <div class="arc"> <svg width="500" height="500" viewbox="-5 -5 505 505"> <path d="M200 0 Q160 10 140 20" stroke="red" stroke-width="5" style="fill: transparent;" /> </svg> </div> <div class="arc"> <svg width="500" height="500" viewbox="-5 -5 505 505"> <path d="M200 0 Q160 10 140 20" stroke="red" stroke-width="5" style="fill: transparent;" /> </svg> </div> <div class="arc"> <svg width="500" height="500" viewbox="-5 -5 505 505"> <path d="M200 0 Q160 10 140 20" stroke="red" stroke-width="5" style="fill: transparent;" /> </svg> </div> </div> <div class="arc"> <svg width="500" height="500" viewbox="-5 -5 505 505"> <path d="M200 0 Q160 10 140 20" stroke="red" stroke-width="5" style="fill: transparent;" /> </svg> </div> </div> <div class="arc"> <svg width="500" height="500" viewbox="-5 -5 505 505"> <path d="M200 0 Q160 10 140 20" stroke="red" stroke-width="5" style="fill: transparent;" /> </svg> </div> </div> <div class="arc"> <svg width="500" height="500" viewbox="-5 -5 505 505"> <path d="M200 0 Q160 10 140 20" stroke="red" stroke-width="5" style="fill: transparent;" /> </svg> </div> </div> <div class="arc"> <svg width="500" height="500" viewbox="-5 -5 505 505"> <path d="M200 0 Q160 10 140 20" stroke="red" stroke-width="5" style="fill: transparent;" /> </svg> </div> </div> <div class="arc"> <svg width="500" height="500" viewbox="-5 -5 505 505"> <path d="M200 0 Q160 10 140 20" stroke="red" stroke-width="5" style="fill: transparent;" /> </svg> </div> </div> <div class="arc"> <svg width="500" height="500" viewbox="-5 -5 505 505"> <path d="M200 0 Q160 10 140 20" stroke="red" stroke-width="5" style="fill: transparent;" /> </svg> </div> </div> <div class="arc"> <svg width="500" height="500" viewbox="-5 -5 505 505"> <path d="M200 0 Q160 10 140 20" stroke="red" stroke-width="5" style="fill: transparent;" /> </svg> </div> <div class="arc"> <svg width="500" height="500" viewbox="-5 -5 505 505"> <path d="M200 0 Q160 10 140 20" stroke="red" stroke-width="5" style="fill: transparent;" /> </svg> </div> <div class="arc"> <svg width="500" height="500" viewbox="-5 -5 505 505"> <path d="M200 0 Q160 10 140 20" stroke="red" stroke-width="5" style="fill: transparent;" /> </svg> </div>

  • I will soon bring the result, it turned out very well, thanks! - Embarcadero