<分区>
html - 带 CSS 的括号线
是否可以使用 CSS 或其他技术创建水平花括号？我事先不知道大括号的宽度，我可以在同一页上有多个宽度不同(但高度相同)的大括号。我的第一个想法是使用我拉伸(stretch)的图像以获得正确的宽度，但我不希望图像失真。所以我正在寻找另一种解决方案。
括号将用于在复杂的表格下添加描述。请参阅下面的简单示例。
最佳答案
您可以在每一侧以及每个 :before 和 :after 伪元素上使用两个元素。然后你可以使用 border-radius 创建半圆并旋转它们。
.parent {
padding: 50px;
display: inline-block;
text-align: center;
}
p {
max-width: 300px;
}
.el {
display: inline-flex;
}
.el>div {
width: 50px;
height: 1px;
background: black;
margin: 20px 30px;
position: relative;
}
.el>div:before,
.el>div:after {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-top-left-radius: 200px;
border: 1px solid black;
border-right: none;
border-bottom: none;
}
.el>div:after {
right: -30px;
}
.right:after {
transform: rotate(-180deg);
top: -30px;
}
.left:before {
transform: rotate(-90deg);
top: -30px;
left: -30px;
}
.left:after {
transform: rotate(90deg);
}
.right:before {
left: -30px;
}<div class="parent">
<div class="el">
<div class="left"></div>
<div class="right"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, sequi.</p>
</div>关于html - 带 CSS 的括号线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47079433/