问题描述
这是我要设计的: 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%);
}