KPC
Kevin Powell - Communityβ€’17mo ago
curator

Can we bend a straight line to make it a semi circle?

i want to achieve this:
No description
11 Replies
curator
curatorOPβ€’17mo ago
i achieved by this: 
<body>
  <li class="li--1"></li>
  <li class="li--2"></li>
  <li class="li--3"></li>
  <li class="li--4"></li>
  <li class="li--5"></li>
  <li class="li--6"></li>
</body>
<style>
  body {
    background: #6592CF;
    margin: 0;
    margin-top: 100px;
    position: relative;
  }
  li {
    list-style: none;
    border-radius: 100%;
    background: #060F55;
    position: absolute;
    width: 100%;
    height: 200%;
    z-index: 1;
  }
  li:nth-child(even) {
    background: #6592CF;
  }
  .li--2 {
    scale: 0.9
  }
  .li--3 {
    scale: 0.8
  }
  .li--4 {
    scale: 0.7
  }
  .li--5 {
    scale: 0.6
  }
  .li--6 {
    scale: 0.5
  }
</style>
<body>
  <li class="li--1"></li>
  <li class="li--2"></li>
  <li class="li--3"></li>
  <li class="li--4"></li>
  <li class="li--5"></li>
  <li class="li--6"></li>
</body>
<style>
  body {
    background: #6592CF;
    margin: 0;
    margin-top: 100px;
    position: relative;
  }
  li {
    list-style: none;
    border-radius: 100%;
    background: #060F55;
    position: absolute;
    width: 100%;
    height: 200%;
    z-index: 1;
  }
  li:nth-child(even) {
    background: #6592CF;
  }
  .li--2 {
    scale: 0.9
  }
  .li--3 {
    scale: 0.8
  }
  .li--4 {
    scale: 0.7
  }
  .li--5 {
    scale: 0.6
  }
  .li--6 {
    scale: 0.5
  }
</style>
i wanted to know if there will be any better way for this or liked i asked, any way to bend an element? @kevinpowell any help?
curator
curatorOPβ€’17mo ago
challenge link: https://cssbattle.dev/play/Xjfiq68aHuYcV9dp9TQ8
CSSBattle
The funnest CSS game for web designers & developers
Rook
Rookβ€’17mo ago
this is fairly trivial to do with one element instead. look into the box-shadow property
ansarullahsadat
ansarullahsadatβ€’17mo ago
I will go for some divs here😁
curator
curatorOPβ€’17mo ago
yeah actually i was looking for a way to bend an element i dont think there is
Jochem
Jochemβ€’17mo ago
don't @ Kevin or the mods unless there's a serious discord related issue please
curator
curatorOPβ€’17mo ago
sure
neal mcguire
neal mcguireβ€’17mo ago
Why do you want to "bend" an element? I would do this with a radial gradent on the background. But there are several other possibilities.
Chooβ™šπ•‚π•šπ•Ÿπ•˜
Chooβ™šπ•‚π•šπ•Ÿπ•˜β€’17mo ago
This is my solution: 
<div class="container">
  <div class="outer ring">
    <div class="middle ring">
      <div class="inner ring"></div>
    </div>
  </div>
</div>
<style>
  :root{    
    --border-thickness: 20px;
    --container-width: 400px;
  }
  body{
    margin: 0;
  }
  .container {    
    width: var(--container-width);
    height: 300px;
    background: #6592CF;
    position: relative;
  }
  .ring{
    border-radius: 50%;
    border: var(--border-thickness) solid #060F55;
  }
  .outer{
    position: absolute;
    --size: calc(var(--container-width) - 2 * (var(--border-thickness)));
    width: var(--size);
    height: var(--size);    
    top: 100px;    
  }
  .middle{
    position: absolute;
    --size: calc(var(--container-width) - 6 * (var(--border-thickness)));
    width: var(--size);
    height: var(--size);    
    top: var(--border-thickness); 
    left: var(--border-thickness);
  }
  .inner{
    position: absolute;
    --size: calc(var(--container-width) - 10 * (var(--border-thickness)));
    width: var(--size);
    height: var(--size);    
    top: var(--border-thickness); 
    left: var(--border-thickness);
  }
</style>
<div class="container">
  <div class="outer ring">
    <div class="middle ring">
      <div class="inner ring"></div>
    </div>
  </div>
</div>
<style>
  :root{    
    --border-thickness: 20px;
    --container-width: 400px;
  }
  body{
    margin: 0;
  }
  .container {    
    width: var(--container-width);
    height: 300px;
    background: #6592CF;
    position: relative;
  }
  .ring{
    border-radius: 50%;
    border: var(--border-thickness) solid #060F55;
  }
  .outer{
    position: absolute;
    --size: calc(var(--container-width) - 2 * (var(--border-thickness)));
    width: var(--size);
    height: var(--size);    
    top: 100px;    
  }
  .middle{
    position: absolute;
    --size: calc(var(--container-width) - 6 * (var(--border-thickness)));
    width: var(--size);
    height: var(--size);    
    top: var(--border-thickness); 
    left: var(--border-thickness);
  }
  .inner{
    position: absolute;
    --size: calc(var(--container-width) - 10 * (var(--border-thickness)));
    width: var(--size);
    height: var(--size);    
    top: var(--border-thickness); 
    left: var(--border-thickness);
  }
</style>
capt_uhu
capt_uhuβ€’17mo ago
could also go with a single element including a border-style: double; for 2 of the rings and then an outline with an outline-offset for the third maybe?
neal mcguire
neal mcguireβ€’17mo ago
I think this would also work: 
background: rgb(85,148,203);
background: radial-gradient(circle at bottom, rgba(85,148,203,1) 0%, rgba(85,148,203,1) 12%, rgba(0,18,82,1) 12%, rgba(0,16,75,1) 15%, rgba(85,148,203,1) 15%, rgba(85,148,203,1) 21%, rgba(0,16,75,1) 21%, rgba(0,16,75,1) 24%, rgba(85,148,203,1) 24%, rgba(85,148,203,1) 30%, rgba(0,16,75,1) 30%, rgba(0,16,75,1) 33%, rgba(85,148,203,1) 33%, rgba(85,148,203,1) 100%);
background: rgb(85,148,203);
background: radial-gradient(circle at bottom, rgba(85,148,203,1) 0%, rgba(85,148,203,1) 12%, rgba(0,18,82,1) 12%, rgba(0,16,75,1) 15%, rgba(85,148,203,1) 15%, rgba(85,148,203,1) 21%, rgba(0,16,75,1) 21%, rgba(0,16,75,1) 24%, rgba(85,148,203,1) 24%, rgba(85,148,203,1) 30%, rgba(0,16,75,1) 30%, rgba(0,16,75,1) 33%, rgba(85,148,203,1) 33%, rgba(85,148,203,1) 100%);
I didn't play around with the ring spacing. But some some adjustments to the percentage will get the exact rings.
Want results from more Discord servers?
Add your server