Adding text to border without adding spacing

Question

I have achieved a certain CSS shape with clip paths. This shape is actually the border of the div. I want to add text to this border but couldn't find a way to achieve this without removing the border the text occupies. When I add text to the arc div's, the text never seems to appear. If you use a browser like chrome to see where the p tag is being placed, it is actually being placed in the content of the div, which is reasonable, but gets cut off from the way this shape was made. (probably because of overflow: hidden)

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>

Please edit question with added text to where it should be – Justinas Mar 22 '21 at 07:47 — Justinas, Mar 22 '21 at 07:47

score 0 · Answer 1 · answered Mar 22 '21 at 08:30

Here is as starting idea. The trick is to apply the correct transformation to the text. I also changed the shape to consider background instead of border.

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;
    background:radial-gradient(farthest-side,transparent calc(100% - var(--s)), var(--c,red) 0  99%,transparent 100%);
    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)); 
    display:flex;
      
    
}

.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;
}

.palette p {
    color: #000;
    margin:auto;
    font-size: 18px;
    transform: rotate(60deg) translateY(-230px);
}

<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">
                <p>This is where I want to put my text</p>
                
            </div>
        </a>

        <a href="">
            <div class="arc3">
                <p>This is where I want to put my text</p>

            </div>
        </a>

        <a href="">
            <div class="center-circle">

            </div>
        </a>

    </div>
   </body>

Oh wow! looks promising. I'll try as soon as I can. Is there any way to curve the text without breaking the code? — samervjr, Mar 22 '21 at 08:44
@samervjr check this :https://stackoverflow.com/q/2840862/8620333 — Temani Afif, Mar 22 '21 at 08:56
Oh wow, thanks a lot man. I really appreciate the help i've been at this for weeks.. — samervjr, Mar 22 '21 at 09:02

Adding text to border without adding spacing

1 Answers1