How to remove unwanted gaps between clip'ed DIVs using clip-path?

Question

How to remove unwanted gaps between clip'ed DIVs using clip-path?

43 Views Asked by Eximos At 23 March 2024 at 01:18

I'm trying to build a sort of selection menu in the form of a ring. For this I use CSS clip-paths. Cutting out the individual parts works so far, as does arranging the segments via rotation. However, I now have gaps between the individual segments that I cannot remove. How could I solve the whole thing? Attached is the codepen for my problem:

https://codepen.io/eximos/pen/XWQRVez

#selectionwheel-container {
  width: 100vw;
  height: 100vh;
}

#selection-wheel {
  width: 600px;
  height: 600px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
 }

 .selection-wheel-item {
  width: 600px;
  height: 600px;
  position: absolute;
  left: 0px;
  top: 0px;
  background: rgba(0,0,0,0.85);
  clip-path: url(#sector);
 }

 .selection-wheel-item:not(.wheel-item-disabled):hover {
  background: rgba(90, 18, 18, 1.0);
  cursor: pointer;
}

<html>
    <body>
        <div id="selectionwheel-container">
            <div id="selection-wheel">
                <div class="selection-wheel-item"></div>
                <div class="selection-wheel-item" style="transform: rotate(60deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(120deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(180deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(240deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(300deg)"></div>
            </div>
        </div>

        <svg height="0" width="0">
            <defs>
                <clipPath clipPathUnits="objectBoundingBox" id="sector">
                    <path shape-rendering="optimizeSpeed" fill="none" stroke="#111" stroke-width="0" class="sector" d="M0.5,0.0 A0.5,0.5 0 0,1 0.9330127018922194,0.25 l-0.2165063509461097,0.125 A0.25,0.25 0 0,0 0.5,0.25 l0,-0.25"></path>
                </clipPath>
            </defs>
        </svg>
  </body>
</html>

HTML

<html>
    <body>
        <div id="selectionwheel-container">
            <div id="selection-wheel">
                <div class="selection-wheel-item"></div>
                <div class="selection-wheel-item" style="transform: rotate(60deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(120deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(180deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(240deg)"></div>
                <div class="selection-wheel-item" style="transform: rotate(300deg)"></div>
            </div>
        </div>

        <svg height="0" width="0">
            <defs>
                <clipPath clipPathUnits="objectBoundingBox" id="sector">
                    <path shape-rendering="optimizeSpeed" fill="none" stroke="#111" stroke-width="0" class="sector" d="M0.5,0.0 A0.5,0.5 0 0,1 0.9330127018922194,0.25 l-0.2165063509461097,0.125 A0.25,0.25 0 0,0 0.5,0.25 l0,-0.25"></path>
                </clipPath>
            </defs>
        </svg>
    </body>
</html>

CSS

#selectionwheel-container {
    width: 100vw;
    height: 100vh;
}

#selection-wheel {
    width: 600px;
    height: 600px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}

.selection-wheel-item {
    width: 600px;
    height: 600px;
    position: absolute;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.85);
    clip-path: url(#sector);
}

.selection-wheel-item:not(.wheel-item-disabled):hover {
    background: rgba(90, 18, 18, 1.0);
    cursor: pointer;
}

Original Q&A

There are 1 best solutions below

**herrstrietzel** · Answer 1 · 2024-03-23T17:42:14.587000

I'm afraid there is not much you can do this about since
these gaps are introduced by pixel's that don't fit the current screen pixel grid.

As a workaround you may add a background element filling these gaps with a solid/opaque color.

In fact we're adding a "full-donut" clip path like this and apply it to the parent element.

<clipPath clipPathUnits="objectBoundingBox" id="fullCircle">
<path 
d="M0.5 0
a 0.5 0.5 0 0 1  0 1
a 0.5 0.5 0 0 1  0 -1
m 0 0.25
a 0.25 0.25 0 0 0  0 0.5
a 0.25 0.25 0 0 0  0 -0.5" />
</clipPath>

#selectionwheel-container {
  width: 100vw;
  height: 100vh;
}

#selection-wheel {
  width: 600px;
  height: 600px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background: rgba(0, 0, 0, 0.85);
  clip-path: url(#fullCircle);
}

.selection-wheel-item {
  width: 600px;
  height: 600px;
  position: absolute;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.85);
  clip-path: url(#sector);
}

.selection-wheel-item:not(.wheel-item-disabled):hover {
  background: rgba(90, 18, 18, 1.0);
  cursor: pointer;
}

<html>

<body>
  <div id="selectionwheel-container">
    <div id="selection-wheel">
      <div class="selection-wheel-item"></div>
      <div class="selection-wheel-item" style="transform: rotate(60deg)"></div>
      <div class="selection-wheel-item" style="transform: rotate(120deg)"></div>
      <div class="selection-wheel-item" style="transform: rotate(180deg)"></div>
      <div class="selection-wheel-item" style="transform: rotate(240deg)"></div>
      <div class="selection-wheel-item" style="transform: rotate(300deg)"></div>
    </div>
  </div>

  <svg height="0" width="0">
            <defs>
      <!-- segment clip path -->
                <clipPath clipPathUnits="objectBoundingBox" id="sector">
                    <path shape-rendering="optimizeSpeed"
          d="M0.5,0.0 A0.5,0.5 0 0,1 0.9330127018922194,0.25 l-0.2165063509461097,0.125 A0.25,0.25 0 0,0 0.5,0.25 l0,-0.25" />
                </clipPath>
      <!-- background clip path -->
        <clipPath clipPathUnits="objectBoundingBox" id="fullCircle">
                <path 
                d="M0.5 0
                   a 0.5 0.5 0 0 1  0 1
                   a 0.5 0.5 0 0 1  0 -1
                   m 0 0.25
                   a 0.25 0.25 0 0 0  0 0.5
                   a 0.25 0.25 0 0 0  0 -0.5
                   " />
        </clipPath>
            </defs>
        </svg>
</body>

</html>

How to remove unwanted gaps between clip'ed DIVs using clip-path?

There are 1 best solutions below

Related Questions in CSS

Related Questions in SVG

Related Questions in CLIP-PATH

Trending Questions

Popular # Hahtags

Popular Questions