纯CSS实现花括号 ‘{‘ （二）（自适应内容高度）

小鸣同xio

已于 2024-04-03 16:01:55 修改

阅读量1.6k

点赞数 21

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

于 2024-04-03 15:57:41 首次发布

本文链接：https://blog.csdn.net/weixin_45856516/article/details/137347812

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

纯CSS实现花括号 '{'（二）

先展示最终效果
前言
- 代码：

先展示最终效果

**注：直接复制添加 class='item’的元素即可实现自动高度变化 **
在这里插入图片描述

前言

md,那个吊毛是真给我学习机会啊，给他后，
他又讲：你这个不会随着里边的内容高度自动变化；
我：你写个动态样式不就行了？
他：你看这个，他还会根据内容自动变高！
我：代码发出来我看看
（wc有点东西）
研究了会也没看懂高度怎么自动变化的（高度是文本撑起来的，左边的花括号的边也是内容的一部分）。但是我来了个移花接木，把我写的圆弧⌒替换下就成了，不愧是我，我真棒

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .base {
      position: relative;
      width: 100%;
      min-width: 300px;
      display: table;
    }

    .base>.row {
      display: table-row;
    }

    .base>.row>.title,
    .base>.row>.list {
      display: table-cell;
      vertical-align: middle;
    }

    .base>.row>.title {
      position: relative;
      width: 60px;
      padding-right: 10px;
      text-align: right;
      font-size: 14px;
      border-right: 1px solid #373d41;
    }

    .base>.row>.title::after {
      content: '';
        height: 5px;
        width: 5px;
        right: -6px;
        top: -5px;
        position: absolute;
        border: 1px solid #000;
        border-top-left-radius: 100%;
        border-right: none;
        border-bottom: none;
    }

    .base>.row>.title::before {
        content: '';
        height: 5px;
        width: 5px;
        right: -6px;
        bottom: -5px;
        position: absolute;
        border: 1px solid #000;
        border-bottom-left-radius: 100%;
        border-top: none;
        border-right: none;
    }

    .base>.row>.title>.BR {
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -4px;
      height: 0px;
      width: 0px;
      border-top: 4px solid transparent;
      border-right: 5px solid black;
      border-bottom: 4px solid transparent;
    }

    .base>.row>.title>.BR::after {
      content: '';
      position: absolute;
      top: -7px;
      left: 2px;
      border-top: 7px solid transparent;
      border-right: 12px solid #FFFFFF;
      border-bottom: 7px solid transparent;
    }

    .base>.row>.list {
      text-align: left;
      padding-left: 10px;
    }

    .base>.row>.list .li {
      height: 30px;
      line-height: 30px;
    }

    .base>.row>.list .li>.name {
      padding-right: 5px;
    }
  </style>
</head>

<body>
  <div class="base">
    <div class="row">
      <div class="title">
        联系人<span class="BR"></span>
      </div>
      <div class="list">
        <div class="item">
          <span>联系人</span>
        </div>
        <div class="item">
          <span>联系人</span>
        </div>
        <div class="item">
          <span>联系人</span>
        </div>
        <div class="item">
          <span>联系人</span>
        </div>
        <div class="item">
          <span>联系人</span>
        </div>
        <div class="item">
          <span>联系人</span>
        </div>
      </div>
    </div>
  </div>
</body>

</html>