如何仅使用 CSS 获得这种圆角效果？ [关闭]答案

【问题标题】：How to get this rounded corner effect using only CSS? [closed]如何仅使用 CSS 获得这种圆角效果？ [关闭]
【发布时间】：2021-02-24 03:15:49
【问题描述】：

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

这就是我到目前为止所实现的： implementation with blocky segments

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

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

【问题讨论】：

标签： css angular sass rounded-corners border-radius

【解决方案1】：

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

【讨论】：

【解决方案2】：

您必须使用border-radius 来实现此目的。

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

你可以用

设置你最左边的部分

border-radius: 25px 0 0 25px;

和你最右边的部分

border-radius: 0 25px 25px 0;

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

border-radius: 25px;

【讨论】：

【解决方案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

【讨论】：