Html Question posted in
Some basic documentation can be found here.

How do I create this in html and CSS


It works well in Android but in desktop the hr tag will go out of circle and goes to top of circle

#circle {
  border        : 5px solid red;
  width         : 40%;
  box-shadow    : 0 0 20px red, inset 0 0 20px red;
  aspect-ratio  : 1/1;
  border-radius : 50%;
  text-align    : center;
  font-size     : large;
  }
#circle > div {
  font-size   : 24px; 
  color       : white; 
  text-shadow : 0 0 10px #0fa;
  }
#circle > hr {
  background  : red; 
  border      : 2px solid red; 
  box-shadow  : 0 0 20px red, inset 0 0 20px red;
  }
#circle > span {
  color       : white; 
  text-shadow : 0 0 10px #0fa;
  }
<div class="circle" id="circle">
  <br>
  <div id="result1" ></div>
  <hr>
  <span id="result2"></span>
</div>
Tags:

2

Answers


  1. 0

    Remove the <br> and the <hr> tags. You might need to modify the stylesheet too. Try the solution below:

    #circle {
  border        : 5px solid red;
  width         : 40%;
  box-shadow    : 0 0 20px red, inset 0 0 20px red;
  aspect-ratio  : 1/1;
  border-radius : 50%;
  text-align    : center;
  font-size     : large;
  }
#circle > div {
  font-size   : 24px; 
  color       : white; 
  text-shadow : 0 0 10px #0fa;
  height: 50%;
  position: relative;
  }
#circle > div#result1 {
  border-bottom: 5px solid red;
  }
#circle > hr {
  background  : red; 
  border      : 2px solid red; 
  box-shadow  : 0 0 20px red, inset 0 0 20px red;
  }
#circle > span {
  color       : white; 
  text-shadow : 0 0 10px #0fa;
  }
    <div class="circle" id="circle">
  <div id="result1" ></div>
  <span id="result2"></span>
</div>
    Login or Signup to reply.
  2. 0

    Here is how you can achieve the desired results in desktop (assuming you want similar output to that of mobile and you have similar html structure.).

    I have made use of the display:flex property, centering them vertically and horizontally using align-items and justify-content, after that using the flex-direction:column makes them stack upon each other and setting the <hr/> to width:100% gets the desired result.

    #circle {
  border        : 5px solid red;
  width         : 40%;
  box-shadow    : 0 0 20px red, inset 0 0 20px red;
  aspect-ratio  : 1/1;
  border-radius : 50%;
  text-align    : center;
  font-size     : large;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  }
#circle > div {
  font-size   : 24px; 
  color       : black; 
  text-shadow : 0 0 10px #0fa;
  }
#circle > hr {
  background  : red; 
  border      : 2px solid red; 
  box-shadow  : 0 0 20px red, inset 0 0 20px red;
  width: 100%;
  }
#circle > span {
  color       : black; 
  text-shadow : 0 0 10px #0fa;
  }
    <div class="circle" id="circle">
    <br>
    <div id="result1">
        <span>8 days</span>
    </div>
    <hr>
    <div id="result2">
        <span>2:43:58</span>
    </span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search