先展示最终效果
前言
今天群内有人说像这样的花括号怎么实现
我就用微信截图给他简单画了一下实现思路,如下图:
过了一会他用另一个思路也实现了,如下图:
就是放大文本嘛,不好看,不好看
我就决定自己写一个
version 1
通过好几个矩形实现的,很复杂还不好看,不好看
最终版本
注:可使用动态样式 来调整花括号的宽高
代码如下:
<style>
* {
padding: 0;
margin: 0;
}
.box {
padding: 100px;
width: 100px;
height: 200px;
}
/* border: 1px solid #956e6e; */
.TTT{
height: 15px;
}
.base{
height: 100px;
width: 30px;
position: relative;
box-sizing: border-box;
}
.t{
background-color: antiquewhite;
border-bottom-right-radius: 30px;
border: 1px solid #000;
border-top: none;
border-left: none;
&:before{
content: '';
height: 30px;
width: 30px;
background-color: rgb(248, 165, 57);
position: absolute;
right: -31px;
top: -30px;
border: 1px solid #000;
border-top-left-radius: 100%;
border-right:none;
border-bottom:none;
}
}
.b{
margin-top: -1px;
background-color: rgb(220, 196, 164);
border-top-right-radius: 30px;
border: 1px solid #000;
border-bottom: none;
border-left: none;
&:before{
content: '';
height: 30px;
width: 30px;
background-color: rgb(248, 165, 57);
position: absolute;
right: -31px;
bottom: -30px;
border: 1px solid #000;
border-bottom-left-radius: 100%;
border-top: none;
border-right: none;
}
}
</style>
</head>
<body>
<div class="box">
<div class="base t">
</div>
<div class="base b">
</div>
</div>
</body>
最后:喜欢的同学,记得点赞关注哦!
兄弟们 有后续 :
纯CSS实现花括号 ‘{‘ (二)(自适应内容高度) https://blog.csdn.net/weixin_45856516/article/details/137347812