如何在 CSS 中制作 4 个弯曲的角边框？[复制]-解网

问：

22天前关闭。

示例图片我有四个摘要部分，它们都有四个小的弯曲角边框，但我无法做到。

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

这是 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>

HTML CSS 边框圆角

    .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%);
    }

上一个：如何删除JTabbedPane边框？

下一个：标题列边框与单元格边框不匹配 - 可分组标题

如何在 CSS 中制作 4 个弯曲的角边框？[复制]

How can I make 4 curved corner borders in CSS? [duplicate]

评论