怎么只用CSS就可以得到这个圆角效果？

Question

这是我想要的设计： design with rounded corners

这是我目前所实施的： implementation with blocky segments

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

顺便说一下，这是在 angular。

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

Example of Code

怎么只用CSS就可以得到这个圆角效果？

How to get this rounded corner effect using only CSS?

css

angular

sass

rounded-corners

border-radius