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

而是使用溢出来切断圆形部分。

flex也可以帮助集中精力

示例：

＆＃13;

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)
}

＆＃13;

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

＆＃13;

pen

Answer 2

使用您提供的代码，以及可能不正确的假设，我提出了一些适合您的代码。您可以使用绝对定位和顶部和左侧值在div中添加文本，以使文本在您希望的位置。

所做的更改：向主体添加flex以使切片居中。取出宽度，高度，位置，顶部，左侧和边距。将边界半径减小到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>

把内容放在形状div中

2 个答案: