我用下面的程序创建了一个小括号(左)的实例
span {
width: 30px;
height: 30px;
display: inline-block;
}
.left-brace-tl {
border-right: 2px solid grey;
border-bottom-right-radius: 10px;
margin-right:-6px;
margin-top: 10px;
}
.left-brace-tr {
margin-bottom: 10px;
border-left: 2px solid grey;
border-top-left-radius: 10px;
}
.left-brace-bl {
margin-top: -4px;
border-right: 2px solid grey;
border-top-right-radius: 10px;
margin-right:-6px;
}
.left-brace-br {
margin-bottom: -8px;
border-left: 2px solid grey;
border-bottom-left-radius: 10px;
}
虽然作为独立基础看起来不错,但是我想使用左(和右)花括号作为矩形div的左右边界
我非常感激我如何前进以实现这种目标
您可以通过使用内容来实现
.sample:before {
content: "{";
font-size: 42px;
}
.sample:after {
content: "}";
font-size: 42px;
}
Sample Content