我是 html 和 css 的新学习者。我想仅使用 css 不使用背景图像或 svg 使我的圆形橙色背景曲线波浪。就像截图一样:
/image/rDQeY.png
不使用背景图像曲线,只在 (.circle-inner) 中使用 css。但我没能做到这一点。我尝试了很多。我上传了我的 html 和 css 代码。
我的 html 和 css 代码:
.circle-inner {
width: 310px;
height: 310px;
background-color:#d1132f;
background-repeat:no-repeat;
margin: 0 auto;
border-radius: 100%;
border: 1px solid #ff8403;
display:table;
position: relative;
z-index: 1;
overflow: hidden;
}
.circle-points {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
text-align: center;
color: #fff;
}
.circle-points h2 {
margin: 0;
font-size: 68px;
}
.circle-points span {
display: block;
font-size: 26px;
}
/* if circle reset */
.circle-inner:after {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
content: '';
z-index: -1;
background: #ffc815; /* Old browsers */
background: -moz-linear-gradient(left, #ffc815 0%, #ff7e01 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffc815 0%,#ff7e01 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffc815 0%,#ff7e01 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc815', endColorstr='#ff7e01',GradientType=1 ); /* IE6-9 */
}
/* if point 1 */
.circle-inner:after {
/* background-color:orange; */
top: 60%;
}
<div class="circle-area">
<div class="circle-inner">
<div class="circle-points">
<h2>1</h2><span>Point</span>
</div>
</div>
</div>
最佳答案
我使用 Div Containers 和 CSS 来重现您所需的结果。根据需要随意调整。首先,我为我们的圆圈制作了一个四边有边框或 50% 的 div 容器。接下来,我构建了另外 2 个具有边界半径和渐变的 div,并将它们旋转以放置以创建结果。希望能帮助到你。
.circleContainer{
width:400px;
height:400px;
border-radius:50%;
background-color:#ffcc33;
margin-left:30%;
margin-top:5%;
position:absolute;
overflow:hidden;
transform:rotate(17deg);
}
.splitA{
width:100%;
height:40%;
float:left;
background-color:#cc0066;
}
.curveOne{
width:100%;
position:absolute;
height:60%;
float:left;
transform:rotate(-50deg);
margin-left:-13%;
margin-top:-7%;
border-bottom-left-radius:60%;
border-top-left-radius:0%;
background: linear-gradient(to bottom, red, #cc0066);
}
.curveTwo{
width:100%;
position:absolute;
height:60%;
float:left;
margin-left:20%;
margin-top:45%;
transform:rotate(-50deg);
border-bottom-right-radius:0%;
border-top-right-radius:40%;
background: linear-gradient(to top, #cc6600, #ff9933, #ffcc33);
}
<div class="circleContainer">
<div class="splitA"><div class="curveOne"></div></div>
<div class="curveTwo"></div>
</div>
关于html - CSS曲线波浪背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48636463/