没有JavaScript，可以使border-radius等于总高度的一半？

Question

我正在建立一个网站，并且模型要求某个类型的元素的左端和右端各自为半圆。由于元素的高度取决于文本的大小，我知道这意味着我需要让它们的border-radii等于元素总高度的一半。这可能不使用JS吗？

Answer 1

绝对 - 只需将border-radius设置为大尺寸！

#some-element {
    border-radius: 9999px;
}

它将以允许圆角的最大尺寸顶出。但是，如果你的元素高于它的宽度，请记住，如果没有加宽元素，你不能让双方都是半圆。