css - 如何仅使用 CSS 获得这种圆角效果？

Question

这就是我想要的设计： 圆角设计

这就是我到目前为止所实现的： 用块状片段实现

如何实现对角的圆角效果，如预期设计所示？现在，每个段都是它们自己的 HTML 元素，并包含在一个具有圆角效果的 HTML 块中，但它位于矩形段的下方。是否可以进行某种剪辑，以便可以将段下的 HTML 元素的形状叠加到段上，以便它们在正确的位置具有圆形颜色（我不希望颜色之间的中断是圆角也）？

顺便说一句，这是有角度的。

Answer 1

border-radius在父级上使用+ overflow: hidden。

Answer 2

你必须使用border-radius来实现这一点。

#myBar {
  background: #6f00ff;
  border-radius: 25px;
  padding: 20px;
  width: 200px;
  height: 10px;
}

<div id="myBar">
<!-- your content-->
</div>

Answer 3

您需要使用这些样式（将 20px 更改为适合您的样式。）

对于最左边的部分

.left-round {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

对于最右边的部分

.right-round {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

保持其余代码不变。

例子

.left-round {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.right-round {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.row>div {
  text-align: center;
  flex: 0 0 25%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

<div class="row">
  <div class="red left-round">Test</div>
  <div class="green">col 2</div>
  <div class="blue right-round">col 3</div>
</div>

Answer 4

有两种方法可以做到这一点。

您可以使用

border-radius: 25px 0 0 25px;

和你最右边的部分

border-radius: 0 25px 25px 0;

第二种方法是将所有三个段放在一个 div 中并设置 div 的样式

border-radius: 25px;

Answer 5

如果您只需要一个元素来拥有所有三种颜色，则代码示例。

HTML 代码

<div id="colorBar">
  <!-- Example div with hello inside to display CSS-->
    hello
</div>

CSS 代码

#colorBar{
  /* Creates rounded corners for element */
  border-radius: 15px;
  /* linear-gradient has color ,starting percentage, and ending percentage*/
  background: linear-gradient(to right, 
     blue 0% 33%, purple 33% 66%, lightblue 66% 100%);
}

代码示例