CODEWITHSUNDEEP
cssclip-path
srd
srd

Reputation: 51

clip-path: Combine circle and polygon

Is it possible to combine the clip-path shapes? I haven't found anything to suggest that it is possible.. If it's not possible, do you have another solution to solve this?

I use clip-path polygon to create a line going downwards in a table, and I need some of the line to have circles as well. This is the shape I want:

enter image description here

I have played around and tried stuff like this:

  clip-path: polygon(40% 0, 40% 100%, 60% 100%, 60% 0), circle(8px at 50% 50%);

and

      clip-path: polygon(40% 0, 40% 100%, 60% 100%, 60% 0);
      clip-path: circle(8px at 50% 50%);

but with no luck. Any ideas?

Upvotes: 0

Views: 863

Answers (1)

Temani Afif
Temani Afif

Reputation: 272901

mask can do it:

.box {
  width:200px;
  height: 400px;
  -webkit-mask:
    /* the circle*/
    radial-gradient(circle closest-side,#000 98%,#0000),
    /* the line             width=60% */
    linear-gradient(#000 0 0) 50%/60% 100% no-repeat;
  background:linear-gradient(red,blue);
}
<div class="box"></div>

Upvotes: 1

Related Questions