将文本添加到边框而不添加间距答案

【问题标题】：Adding text to border without adding spacing将文本添加到边框而不添加间距
【发布时间】：2021-03-22 07:16:03
【问题描述】：

我已经用剪辑路径实现了某种 CSS 形状。这个形状实际上是 div 的边界。我想在此边框中添加文本，但在不删除文本占用的边框的情况下找不到实现此目的的方法。当我向弧 div 添加文本时，文本似乎永远不会出现。如果您使用chrome之类的浏览器查看p标签的放置位置，它实际上是放置在div的内容中，这是合理的，但与制作此形状的方式不同。（可能是因为溢出：隐藏）

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>

【问题讨论】：

请编辑问题并在应有的位置添加文本
@Justinas 刚刚做了

标签： html css

【解决方案1】：

这是作为开始的想法。诀窍是对文本应用正确的转换。我还更改了形状以考虑背景而不是边框。

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>

【讨论】：

哇哦！看起来很有希望。我会尽快尝试。有什么方法可以在不破坏代码的情况下弯曲文本？
@samervjr 检查这个：stackoverflow.com/q/2840862/8620333
哦，哇，非常感谢。我真的很感谢我几周来一直在这方面的帮助..