时间戳

首页 > 解决方案 > 将文本添加到边框而不添加间距

html - 将文本添加到边框而不添加间距

问题描述

我已经用剪辑路径实现了某种 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>

标签： htmlcss

解决方案

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

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>

推荐阅读