Qualtrics (HTML/CSS/Java)：如何创建一个中间有一条线的圆，线的上方和下方有文字

Question

在创建 shapes/these 语言方面缺乏经验。

我创建了一项关于 Qualtrics 的调查，需要将文本放入圆圈中。

一个圆圈就够简单了，我发现以前的讨论对我有帮助，但为了清楚起见，请看下图。

现在，我正在将这段代码用于简单的圆圈，将更改它以匹配第二个圆圈。

.circle
    {
    width:500px;
    height:500px;
    border-radius:250px;
    font-size:50px;
    color:#fff;
    line-height:500px;
    text-align:center;
    background:#000
    }

<div class="circle">Text</div>

第二个圆圈中间需要一条线，用来划分文本输入，一条在线上，另一条在线下。

Simple Circle

Circle with two text inputs

Answer 1

我使用 linear-gradient 作为“背景”（中间线），flex 用于文本定位

.circle
    {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 200px;
    height: 200px;
    border-radius: 250px;
    font-size: 30px;
    color: black;
    text-align: center;
    background: #000;
    border: solid black 1px;
    background: linear-gradient(to top, white 49%, black 50%, white 50%),
      linear-gradient(to bottom, white, black 60%, white 50%);
}

<div class="circle">
  <div>Text</div>
  <div>Text</div>

</div>

正如 imperyum 提到的那样，你可以用 before/after 伪元素实现这条线

 .circle
    {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    width:200px;
    height:200px;
    border-radius:50%;
    font-size:30px;
    color:black;
    text-align:center;
    background:#000;
    border:solid black 1px;
    background: white
}

.circle:after {
  content:"";
  width:100%;
  background-color:black;
 height:1px;
  position:absolute;
  top:50%;
}

<div class="circle">
  <div>Text</div>
  <div>Text</div>

</div>

Qualtrics (HTML/CSS/Java)：如何创建一个中间有一条线的圆，线的上方和下方有文字

Qualtrics (HTML/CSS/Java): How to create a circle with a line in the middle, text above and below the line

html

css

java

qualtrics