html - 如何获得弧形的div？

Question

<分区>

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