纯CSS实现花括号 ‘{‘ （一）

小鸣同xio

已于 2024-04-03 16:08:57 修改

阅读量2k

点赞数 45

分类专栏： CSS 文章标签： css 前端

于 2024-04-03 14:15:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45856516/article/details/137343342

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

纯CSS实现花括号 '{'

先展示最终效果
前言
- version 1
- 最终版本

先展示最终效果

在这里插入图片描述

前言

今天群内有人说像这样的花括号怎么实现在这里插入图片描述
我就用微信截图给他简单画了一下实现思路，如下图：

过了一会他用另一个思路也实现了，如下图：

就是放大文本嘛，不好看，不好看
我就决定自己写一个

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>