Put content in shaped divs - css

Question

I'm trying to make divs that are shaped like slices of a circle, using this code (this is for the top section of the circle) in CSS:
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;
and that makes the divs show up the way I want them to on the page, but when I try to put any text into them, it doesn't show up. I think I get why (because the actual height and width of the div are 0 and what shows up on the page is just the border), but how would I make divs that look the same but can contain text or images?

Answer 1

instead border, use overflow to cut off round parts.
flex can also help with centering things
example:
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

Using the code you provided, and going off possibly incorrect assumptions, I have come up with some code that will work for you. You can add text inside the div using absolute positioning and the top and left values to get your text where you would like it.
Changes Made:
Added flex to the body to center the slice. Took out width, height, position, top, left, and margin. Reduced the border radius to 50% since that is all that is needed to create the rounded edge. Reduced the border by 100px purely so that the example slice was not so big.
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>