如何使div呈弧形？

Question

我正在尝试创建一个包含引号的div。 div必须为圆弧的25％。

如何创建圆形但仅使用左上25％空间的div？

我尝试了borderRadius属性，该属性给出了一个完整的圆圈。

 <div
        style={{
          border: "1px solid black",
          height: "100px",
          width: "100px",
          borderRadius: "50%"
        }}
      >
        This is where the quotes will be printed
      </div>

如何使该div为弧形？例如这张图片中的第七个形状

Answer 1

请查看以下解决方案：

.quarter-circle {
    position: relative;
     width: 100px;
     height: 100px;
     background: none;
     border-left: 1px solid black;
     border-top: 1px solid black;
     border-radius: 100px 0 0 0;
     -moz-border-radius: 100px 0 0 0;
     -webkit-border-radius: 100px 0 0 0;
}

.text {
  position: absolute;
  top: 30px;
  left: 30px;
}

<div class="quarter-circle">
  <div class="text">
    This is where the quotes will be printed
  </div>
</div>

您当然可以用其他任何方式移动文本，因此它会适合您的设计。

Snippet external

Answer 2

这将创建您想要的弧。但是div不是圆。不能100％确定这是否是您所需要的。这将与您的文本重叠。您可以为文本创建样式并四处移动。

height: 100px;
width: 100px;
border: 1px solid black;
border-width: 1px 0 0 1px;
border-radius: 100px 0 0 0;

Answer 3

这是弧线。现在，您可以将其转换为所需的任何角度。

.arc{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: solid 3px;
    border-color: red transparent transparent;
}

<div class="arc"></div>