我怎么能画圆圈的底线？

Question

这是图像，我想绘制相同的东西，但是我无法画出绳索部分。

Answer 1

您可以使用以下代码来实现该结构...... 还要检查fiddle here

<强> HTML

<div class="circle">
  <div>
    Best leads and exposure to your
    institution with professional photography services.<br>
    Explore more
  </div>
</div>

<强> CSS

.circle{
  width:300px;
  height:300px;
  border:solid 2px #cd9933;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  position: relative;
  margin:0px auto;
}
.circle div{
  background:#cd9933;
  position: absolute;
  bottom:0px;
  text-align:center;
  height:39%;
  width:100%;
  color:#fff;
  font-size: 20px;
  padding-top:15px;
}

Answer 2

您可以通过渐变背景实​​现此目的，请参阅此小提琴：https://jsfiddle.net/of9nv1k0/1/

<div id="circle"></div>

#circle{
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 60%, #eaa320 60%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 60%,#eaa320 60%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 60%,#eaa320 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaa320',GradientType=0 ); /* IE6-9 */
    width: 500px;
    height: 500px;
    border-radius: 50%;
}

结果呈圆形，顶部为白色，底部为橙色。