如何仅使用CSS获得圆角效果？

如何解决如何仅使用CSS获得圆角效果？

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

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

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

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

解决方法

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

,

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

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

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

,

您需要使用这些样式（将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>

,

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

您可以使用以下样式设置最左侧的细分

border-radius: 25px 0 0 25px;

和最右边的细分

border-radius: 0 25px 25px 0;

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

border-radius: 25px;

,

如果只需要一个元素来具有全部三种颜色，则对代码示例。

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