css 使用border实现的矩形，怎么在上面写东西？

Question

Answer 1

.card {
      width: 130px;
      height: 50px;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }
    .left,.right {
      width: 50px;
      height: 0;
      top: 0;
      display: block;
      color:  #fff;
      position: absolute;
    }
    .left::after,
    .right::after {
      width: 100%;
      line-height: 50px;
      position: absolute;
      text-align: center;
    }
    .left {
      left: 0;
      border-top: 50px solid red;
      border-right: 20px solid transparent;
    }
    .left::after {
      top: -50px;
      content: '左边';
    }
    .right::after {
      top: 0;
      content: '右边';
    }
    .right {
      right: 0;
      border-bottom: 50px solid #000;
      border-left: 20px solid transparent;
    }

---

<div class="card">
  <div class="left"></div>
  <div class="right"></div>
</div>

---

这样你看可以么

Answer 2

如果是静态的的话就用伪类(afetr before)去写 ，如果是动态的但是用定位（position:absoult）去写！

Answer 3

一般都用绝对定位吧