如何在CSS中制作4个弧形角边框？

Question

我有四个摘要部分，它们都有四个小弯角边框，但我无法做到这一点。

我能够用 after 和 before 伪元素制作两个角，但它们只是右上角和左下角（我从堆栈溢出中得到这些解决方案），而且它们甚至不是弯曲的。

这是 HTML 代码

.red-part {
  text-align: center;
  background-color: hsla(0, 100%, 67%, 0.1);
  padding: 1rem;
  margin-top: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
  border-radius: 10px;
  position: relative;
}

.red-part::after {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 1px;
  right: 1px;
  border-top: 1px solid hsla(0, 100%, 67%, 0.2);
  border-right: 1px solid hsla(0, 100%, 67%, 0.2);
}

.red-part::before {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 1px;
  left: 1px;
  border-bottom: 1px solid hsla(0, 100%, 67%, 0.2);
  border-left: 1px solid hsla(0, 100%, 67%, 0.2);
}

.first-section {
  display: inline-block;
  margin: 0 auto;
}

#reaction {
  color: hsl(0, 57%, 60%);
}

<div class="red-part" class="first-section">
  <img src="./assets/images/icon-reaction.svg" alt="Reaction" class="first-section">
  <div class="first-section" id="reaction">Reaction</div>
  <div class="first-section">80</div>
  <div class="first-section" data-number="hundred"> / 100</div>
</div>
<div class="orange-part" class="second-section">
  <img src="./assets/images/icon-memory.svg" alt="Memory" class="second-section">
  <div class="second-section" id="memory">Memory</div>
  <div class="second-section">92</div>
  <div class="second-section" data-number="hundred"> / 100</div>
</div>
<div class="green-part" class="third-section">
  <img src="./assets/images/icon-verbal.svg" alt="Verbal" class="third-section">
  <div class="third-section" id="verbal">Verbal</div>
  <div class="third-section">61</div>
  <div class="third-section" data-number="hundred"> / 100</div>
</div>
<div class="blue-part" class="fourth-section">
  <img src="./assets/images/icon-visual.svg" alt="Visual" class="fourth-section">
  <div class="fourth-section" id="visual">Visual</div>
  <div class="fourth-section">72</div>
  <div class="fourth-section" data-number="hundred"> / 100</div>
</div>

Answer 1

您实际上不需要添加任何这些伪元素来获得所需的效果；只需增加

border-radius

，例如：

    .red-part {
      text-align: center;
      background-color: hsla(0, 100%, 67%, 0.1);
      padding: 1rem;
      margin-top: 1rem;
      margin-left: 2rem;
      margin-right: 2rem;
      border-radius: 50px;
      position: relative;
    }

    .first-section {
      display: inline-block;
      margin: 0 auto;
    }

    #reaction {
      color: hsl(0, 57%, 60%);
    }