Css实现大括号/花括号“{“

最新推荐文章于 2024-06-02 15:09:49 发布

Timi_666

最新推荐文章于 2024-06-02 15:09:49 发布

阅读量437

点赞数 5

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/Timi_666/article/details/137349645

版权

写这个原因是今天看到某平台有个‘{’的列表样式，我就在想他是如何实现的。结过和小鸣同xio和其他的群友沟通后，集思广益搞了几种实现方法：

1.wrh同学提供的方法是：用svg实现

<svg width="100" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 100 A 50 50,0,0,0,50 50 L 50 25 A 25 25,0,0,1,75 0" stroke="blue" stroke- 
     width="4" fill="transparent"/>
  <path d="m0 100 A 50 50,0,0,1,50 150 L 50 175 A 25 25,0,0,0,75 200 " stroke="blue" 
     stroke-width="4" fill="transparent"/>
</svg>

2.用字体大体直接改变font-size:20px;

3.用css实现

<!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>
    .app-box-Contacts {
      position: relative;
      width: 100%;
      min-width: 300px;
      display: table;
    }

    .app-box-Contacts>.row {
      display: table-row;
    }

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

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

    .app-box-Contacts>.row>.title::after {
      /* content: "";
      position: absolute;
      top: 0;
      right: -6px;
      width: 6px;
      height: 1px;
      background-color: #373d41; */
      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;
    }

    .app-box-Contacts>.row>.title::before {
      /* content: "";
      position: absolute;
      bottom: 0;
      right: -6px;
      width: 6px;
      height: 1px;
      background-color: #ccc; */

        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;
    }

    .app-box-Contacts>.row>.title>.jiao {
      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;
    }

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

    .app-box-Contacts>.row>.list {
      text-align: left;
      padding-left: 10px;
    }

    .app-box-Contacts>.row>.list .li {
      height: 30px;
      line-height: 30px;
    }

    .app-box-Contacts>.row>.list .li>.name {
      padding-right: 5px;
    }

    .app-box-Contacts>.row>.list .li>.item-span {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="app-box-Contacts">
    <div class="row">
      <div class="title">
        标题<span class="jiao"></span>
      </div>
      <div class="list">
     <div>
      <span class="item-span ">内容1</span>
    </div>
     <div>
      <span class="item-span ">内容2</span>
    </div>
     <div>
      <span class="item-span ">内容3</span>
    </div>


      </div>
    </div>
  </div>
</body>

</html>

本文是记录和学习的文档，如果有帮到同学们，点个赞吧！！！