Qualtrics (HTML/CSS/Java): How to create a circle with a line in the middle, text above and below the line
Little experience with creating shapes/these languages.
I creating a survey on Qualtrics and need to put text into circles.
- One circle is simple enough, and I found previous discussions to help me with it, but for clarity, see the image below.
Right now, I am using this code for the simple circle, will change it to match the second circle.
.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>- The second circle needs a line in the middle, to divide to text inputs, one above the line, a different one below the line.
Simple Circle
Circle with two text inputs
I used linear-gradient for the "background" (the middle line) and flex for text positioning
.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>as imperyum mentioned, you can achieve the line with before/after pseudo elements
.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>