入れ内容

Question

私はCSSで（これは円の上部のためである）、このコードを使用して、円のスライスのような形をしているdivを作るしようとしている：

width: 0; 
height: 0; 
border-left: 250px solid transparent; 
border-right: 250px solid transparent; 
border-top: 250px solid #FFA8A8; 
border-bottom: 250px solid transparent; 
position: fixed; 
border-radius: 100%; 
top: 50%; 
left: 50%; 
margin-top: -250px; 
margin-left: -250px; 

とそのdivをページ上に表示する方法を表示しますが、テキストを入力しようとすると表示されません。私はなぜ（divの実際の高さと幅が0で、ページ上に表示されるのが境界線であるのか）理由は分かりますが、同じように見えるdivを作るにはどうすればよいでしょうか？

Answer 1

代わりに、オーバーフローを使用して丸い部分を切り取ってください。

フレックスも中心に物事

例を支援することができます：

body>div { 
 
    width: 80vmin; 
 
    height: 80vmin; 
 
    border-radius: 50%; 
 
    overflow: hidden; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    counter-reset: divs; 
 
} 
 

 
div div { 
 
    background: #FFA8A8; 
 
    height: 40vmin; 
 
    width: 40vmin; 
 
    counter-increment: divs; 
 
    display: flex; 
 
} 
 

 
div div:nth-child(odd) { 
 
    background: gray; 
 
    order: 1 
 
} 
 

 
div div:last-child { 
 
    order: 2 
 
} 
 

 
div div:before { 
 
    content: counter(divs); 
 
    transform: rotate(45deg); 
 
    margin: auto; 
 
    font-size: 10vmin 
 
} 
 

 
html { 
 
    min-height: 100%; 
 
    display: flex; 
 
} 
 

 
body { 
 
    margin: auto; 
 
    transform: rotate(-45deg) 
 
}

<div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

pen

Answer 2

あなたが提供されたコードを使用して、おそらく間違った仮定をオフに行くを、私はそのように思い付いた私のコードはあなたのために働くでしょう。 div内にテキストを追加するには、絶対配置と上と下の値を使用して、テキストを希望の場所に配置します。

変更メイド： スライスの中央にフレックスを追加しました。幅、高さ、位置、上、左、および余白を取り出しました。境界の半径を50％に縮小しました。これは、丸みを帯びたエッジを作成するために必要なすべてです。例のスライスがそれほど大きくないように、100pxだけ境界を縮小しました。

body{ 
 
    display:flex; 
 
    align-items: center; 
 
    justify-content:center; 
 
} 
 

 
.slice{ 
 
    border-left: 150px solid transparent; 
 
    border-right: 150px solid transparent; 
 
    border-top: 150px solid #FFA8A8; 
 
    border-bottom: 150px solid transparent; 
 
    border-radius: 50%; 
 
} 
 

 
p{ 
 
    position: absolute; 
 
    left:39%;; 
 
    top: 30px; 
 
}

<div class="slice"> 
 
    <p>Some Text That Fits</p> 
 
</div>