How to get div in an arc shape? [closed]

Question

I am trying to create a div which will contain a quote. This div needs to be in arc shape which is 25% of a circle.

How do I create a div that is in circle shape but use only top left 25% of it's space?

I have tried borderRadius property which gives a full circle.

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

How to get this div as an arc shape? for example 7th shape in this image

Answer 1

Please take a look on this solution:

.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>

Of course you can move your text any other way, so it would be suitable to your design.

Snippet external