【发布时间】：2021-05-20 12:53:44
【问题描述】：
我需要用CSS为一个网站的主页编写这个眼镜形状设计，我需要考虑在眼镜上方的空白处我们要放置一些动态数据。 我的问题是如何管理两侧之间的曲线。 到目前为止，我已经用 CSS 边框和 vh/vw 的指针（但不完美）对顶部圆圈进行了编码以用于响应目的，我尝试将图像用于曲线部分，但它效率不高，因为在响应版本中它不会'工作不完美。
所以我正在寻找一种基于代码的方法来处理这一部分，有什么想法吗？
你可以看到下面的代码：
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap');
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px
}
@media screen and (max-width: 1400px) {
body {
font-size: 12px
}
}
.homePageHeader {
display: grid;
grid-template-columns: 33% 33% 33%;
width: 100%;
text-align: center;
color: #ffff;
height: 20vh;
}
.homePageWrapper {
background: #FFF3D3 no-repeat;
background-size: cover;
height: 100vh;
margin: 0;
transition: .4s linear;
overflow: hidden;
}
.homePageCircleWrapper {
position: relative;
height: 70vh;
text-align: center;
margin: 0 auto;
}
.homePageCircleWrapperInner {
height: 30vw;
width: 30vw;
border-radius: 50%;
border: 2.1875em solid #ff692814;
margin: 0 auto;
position: relative;
}
.homePageCircleHeading {
margin-top: 5em;
margin-bottom: 1.7em;
color: #C86102;
}
.homePageCircleHeading h1 {
font-weight: 300;
font-size: 2.5em;
}
.homePageCircleAppstores img:nth-child(2) {
margin-left: 1.25em;
}
.homePageCircleImage {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0%);
}
#circleScroll {
position: absolute;
height: 30vw;
width: 30vw;
transform: rotate(0deg);
transition: transform 0.7s linear;
top: 0;
left: 0;
text-align: center;
}
.homePageCircleImage img {
width: 25vw;
height: auto;
margin-bottom: -5px;
}
.scrollPointer {
position: absolute;
width: 2.5em;
/* height: 35px; */
background: #ff692814;
margin: 0 auto;
left: 47%;
top: 0;
margin-top: -5.5em;
border-top-right-radius: 2.5em;
border-top-left-radius: 2.5em;
height: 3.3em;
}
.homePageHeaderLogo {
text-align: center;
margin: 0 auto;
transition: .4s;
display: flex;
justify-content: center;
align-items: center;
}
.homePageHeader {
color: #81621F;
}
.homePageHeaderCTA {
font-weight: 500;
font-size: 0.625em;
}
.homePageHeaderMenu {
font-size: 0.625em;
font-weight: 700;
}
.homePageFooter {
padding: 1em 0;
width: 100%;
margin: 0 auto;
text-align: center;
height: 10vh;
position: relative;
}
.homePageFooter span {
font-size: 1em;
font-weight: 500;
color: rgba(129, 98, 31, 1);
}
.homePageFooter span:first-child {
margin-right: 1.8em
}
.homePageFooterInside a {
/* color: #ffff; */
color: #CFCFCF;
text-decoration: none;
}<div class="homePageWrapper">
<div class="custom-footer"></div>
<div class="homePageHeader">
<div class="homePageHeaderMenu">
<p>MENU </p>
</div>
<div class="homePageHeaderLogo">
Logo
</div>
<div class="homePageHeaderCTA">
<p>Click here
</div>
</div>
<div class="homePageCircleWrapper">
<div class="homePageCircleWrapperInner">
<div class="homePageOptions">
<div id="circleScroll">
<span class="scrollPointer"></span>
</div>
</div>
<div class="homePageCircleHeading">
<h1>
A website
<br><strong>For you</strong>
</h1>
</div>
<div class="homePageCircleAppstores">
<span>span</span> <span>span</span></br>
<span>span</span> <span>span</span>
</div>
<div class="homePageCircleImage">
</div>
</div>
<div class="homePageFooter">
<div class="homePageFooterInside">
<a href=""><span>Question</span></a>
<a href=""> <span>Answer</span></a>
</div>
</div>
</div>设计：
【问题讨论】：
-
为什么不使用图像？例如，SVG 会小巧、高效且精确，并且可以根据需要调整大小。
-
是的，SVG 响应式很酷，但问题是在响应式版本中，图像不会很好地附加在圆圈中，同时调整一些空间或重叠显示
-
您需要更具体地了解这个关于 SVG 的问题。只是试图为此使用 CSS 似乎有点过头了。我觉得像 SVG 这样的替代方案可能是一个更好的起点。 “图像”、“圆圈”、“一些空间”——更详细地说明出了什么问题将是一个好的开始:)
-
你尝试过线性渐变和径向渐变的组合吗？
-
好的，让我再试一次 :) 如果你现在检查代码，我用border-width: 2.1875em 构建一个圆，如果我想使用SVG，我需要使用a单独的 div 并将其设置为背景图像和绝对位置，我需要将图像连接到顶部圆圈。正确的？现在，如果我用 vw/vh 定位它，它会动态改变大小，但取决于视口，我会有不同的空间并且它不适合，请检查这张图片，你会明白我的意思：ibb.co/4FGNG4J
标签： html css css-transforms shapes css-shapes