Uzyskanie w całości zaokrąglonego prostokąta

Question

Jak mogę uzyskać prostokąt w pełni zaokrąglony po jednej stronie? Szerokość i wysokość są dynamicznie i niezależnie od siebie zmieniane. Podzielenie prostokąta na 2 części odpada, ponieważ jest w połowie przezroczysty i posiada cień.

Przykład dla stałych wartości:

.box {
  width: 100px;
  height: 200px;
  background-color: red;
  
  border-top-left-radius: 50% 25%;
  border-top-right-radius: 50% 25%;
}

 

Gdy tło było w pełni białe, podzieliłem go na kwadrat i prostokąt, a cień który powstawał między nimi, ukryłem za pomocą pseudoelementu after.

Comments

prostokąt w pełni zaokrąglony po jednej stronie

co to znaczy?

---

Dodałem grafikę

Answer 1

Mam taki pomysł. Nie jest to dynamiczne ale są podwaliny do rozwoju.

<div class="container">
<div class="box"></div>
</div>

.container{
  position: absolute;
  top: 50%;
  left: 50%;
}
.box {
  position: relative;
  width: 100px;
  height: 200px;
  background-color: red;
}

.circle{
  position: absolute;
  border-radius: 100%;
  background-color: red;
}

let ractangle = document.querySelector(".box");
let clientW = ractangle.clientWidth;
console.log(clientW);
const el = document.createElement("div");

el.style.width = clientW + "px";
el.style.height = clientW + "px";
el.style.top = "-" + clientW/2 + "px";
el.classList.add("circle");

ractangle.appendChild(el);

Chodzi o to żeby ustawiać absolutnie dynamicznie kwadrat o rozmiarach pobranych z prostokata

Answer 2

Możesz wykorzystać w borderze jednostki "ch" oraz "ex". Pobaw się nimi bo działają dobrze.