Question

我正在尝试创建带有间隙的内部边界。我尝试使用:after伪元素创建边框，但是:after元素不可见。

.view {
  display: flex;
  flex-direction: column;
  border: none;
  overflow: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px -5px 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: yellow;
  padding: 20px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

.content:after{
   content: '';
   background: black;
   position: absolute;
   bottom: 5px; 
   width: 2px;
   height: 20px;
   right: -10px;    
}

.head {
  text-align: center;
}

<div class="view">
<div class="container">
   <div class="content">
      <div class="val">0</div>
      <div class="head">Total balance</div>
   </div>
   <div class="content">
      <div class="val">0</div>
      <div class="head">Available balance</div>
   </div>
   <div class="content">
      <div class="val">0</div>
      <div class="head">Orders</div>
   </div>
   <div class="content">
      <div class="val">500</div>
      <div class="head">Wallet balance</div>
   </div>
   <div class="content">
      <button class="val" type="button">Send</button>
   </div>
</div>
</div>

我正在努力达到这个结果：

Answer 1

可能有更好的方法。但这无需更改HTML布局即可完成。

.view {
  display: flex;
  flex-direction: column;
  border: none;
  overflow: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px 0 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: yellow;
  padding: 20px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  position: relative;
}

.content:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5px;
  right: -5px;
  background: yellow;
  z-index: 1111;
  border: 4px solid yellow;
}

.content:after {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  right: -5px;
  background: yellow;
  z-index: 1111;
  border: 4px solid yellow;
}

.head {
  text-align: center;
}

<div class="view">
  <div class="container">
    <div class="content">
      <div class="val">0</div>
      <div class="head">Total balance</div>
    </div>
    <div class="content">
      <div class="val">0</div>
      <div class="head">Available balance</div>
    </div>
    <div class="content">
      <div class="val">0</div>
      <div class="head">Orders</div>
    </div>
    <div class="content">
      <div class="val">500</div>
      <div class="head">Wallet balance</div>
    </div>
    <div class="content">
      <button class="val" type="button">Send</button>
    </div>
  </div>
</div>

Answer 2

我希望这对您有帮助

<!DOCTYPE html>
<html>
  <head>
    <style>

    .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .view {
        background-color: yellow;
    }

    .topContainer {
        display: grid;
        grid-template-columns: repeat(3, 3fr);
        border-bottom: 1px solid #000;
    }

    .bottomContainer {
        display: grid;
        grid-template-columns: repeat(2, 3fr);
    }

    .content {
        padding: 25px;
        text-align: center;
        border-left: 1px solid #000;
    }

    .topContainer .content:first-child {
        border: none;
    }

    .bottomContainer .content:first-child {
        border: none;
    }

    </style>
  </head>
  <body>

    <div class="view">
      <div class="topContainer">
         <div class="content center">
            <div>
              <div class="val">0</div>
              <div class="head">Total balance</div>
            </div>
         </div>
         <div class="content center">
            <div>
              <div class="val">0</div>
              <div class="head">Available balance</div>
            </div>
         </div>
         <div class="content center">
            <div>
              <div class="val">0</div>
              <div class="head">Orders</div>
            </div>
         </div>
      </div>
      <div class="bottomContainer">
         <div class="content center">
            <div>
              <div class="val">500</div>
              <div class="head">Wallet balance</div>
            </div>
         </div>
         <div class="content center">
            <button class="val" type="button">Send</button>
         </div>
      </div>
    </div>

  </body>
</html>

Result

弯曲项目内部边界并留有空隙

2 个答案: