I managed to create a unique CSS shape using clip paths as the border of a div. However, I am now facing an issue where I cannot add text to this border without it getting cut off due to the way the shape was created (possibly because of overflow: hidden). Even though I try to include text within the arc divs, it doesn't seem to show up when viewed in browsers like Chrome, as the p tag is being placed inside the content of the div and not displayed correctly.
body {
display: flex;
justify-content: center;
align-items: center;
}
.palette {
--g:30px; /* The gap between shapes*/
--s:100px; /* the size*/
height: 600px;
width: 600px;
position:relative;
display:inline-block;
overflow:hidden;
margin-top: 50px;
}
.arc1, .arc2, .arc3 {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:var(--s) solid var(--c,red);
border-radius:50%;
clip-path:polygon(
calc(50% + var(--g)/2) 50%,
calc(50% + var(--g)/2) 0%,
100% 0%,
100% calc(78.665% - var(--g)/2),
50% calc(50% - var(--g)/2));
transition: border 0.75s ease-out;
transition: polygon() 0.75s ease-out;
}
.arc2 {
transform:rotate(120deg);
--c:blue;
}
.arc3 {
transform:rotate(-120deg);
--c:orange;
}
.center-circle {
width: 360px;
height: 360px;
background-color: black;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -180px;
margin-left: -180px;
}<body>
<div class="palette">
<a href="">
<div class="arc1">
<p>This is where I want to put my text</p>
</div>
</a>
<a href="">
<div class="arc2">
</div>
</a>
<a href="">
<div class="arc3">
</div>
</a>
<a href="">
<div class="center-circle">
</div>
</a>
</div>
</body>