css - 将内容放在形状的 div 中

Question

我正在尝试制作形状像圆形切片的 div，在 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;

这使得 div 以我希望的方式显示在页面上，但是当我尝试将任何文本放入其中时，它没有显示。我想我明白了为什么(因为 div 的实际高度和宽度为 0，页面上显示的只是边框)，但是我如何制作看起来相同但可以包含文本或图像的 div？

Answer 1

取而代之的是border，使用overflow切掉圆形部分。

flex 还可以帮助居中

例子:

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