眼镜造型设计 CSS

Question

我需要为CSS网站的主页编写这个眼镜形状设计代码，我需要考虑在眼镜上部的空白space我们想放一些动态数据。我的问题是如何管理两侧之间的曲线。到目前为止，我已经用 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>

设计：

Answer 1

我更新了我的问题。现在它看起来像眼镜。这是你想要的吗？

如果你想移动眼镜那么你可以使用 class container

.firstHandle {
  height: 40px;
  width: 25px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  background: gray;
  margin-left: 5.1em;
  margin-bottom: -0.5em;
}

.firstCircle {
  width: 150px;
  height: 150px;
  border: 20px solid gray;
  border-radius: 10000px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.curve {
    width: 60px;
    height: 25px;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border: 15px solid gray;
    border-bottom: 0;
    transform: rotate(-90deg);
    margin-top: 0.5em;
    margin-left: 50px;
}

.secondCircle {
  width: 150px;
  height: 150px;
  border: 20px solid grey;
  background: grey;
  border-radius: 10000px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5em;
}

.secondHandle {
  height: 40px;
  width: 25px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  background: gray;
  margin-left: 5.1em;
  margin-top: -0.5em;
}

<div id="container">

  <div class="firstHandle"></div>

  <div class="firstCircle">
    <p>Hello World!</p>
  </div>

  <div class="curve"></div>

  <div class="secondCircle">
    <p>Hello World!</p>
  </div>
  
  <div class="secondHandle"></div>

</div>

如果您希望我更改任何其他内容，请告诉我。

Answer 2

可以仅使用 CSS 渐变来绘制它。这样它就可以根据需要用作任何元素的背景图像，不需要额外的 HTML 或 SVG。

这是一个 class 框架 - 显然可以调整百分比以获得所需的确切比例。

* {
  margin: 0;
  padding: 0;
}
.frame {
  
  --actualh: 100vh; /* set this to what you want the height of the whole thing to be */
  --bg: #6a6a6a; /* background color */
  --frame: #838383; /* frame color */
  
 /* These are measurements taken from the image given. They will be used relatively to calculate various dimensions */ 
  --w: 11.7;
  --h: 26.7;
  
  background-color: var(--bg);
  width: calc(calc(var(--w) / var(--h)) * var(--actualh));
  height: var(--actualh);
  
  background-image:
   /* the lower lens */
   radial-gradient(circle at 50% 75%, var(--frame) 0%, var(--frame) 27%, transparent 27%, transparent 100%),
   /* the upper lens */
   radial-gradient(circle at 50% 25%, var(--bg) 0%, var(--bg) 23%, var(--frame) 23%, var(--frame) 27%, transparent 27%, transparent 100%),
   /* the bridge curved part */
   linear-gradient(to right, transparent 0%, transparent 70%, var(--bg) 70%, var(--bg) 100%),
   radial-gradient(circle, var(--bg) 0%, var(--bg) 23.93%, var(--frame) 23.93%, var(--frame) 33%, transparent 33%, transparent 100%),
   /* the ears */
   radial-gradient(circle at 50% 4%, transparent 0%, transparent 5%, var(--bg) 5%, var(--bg) 15%, transparent 15%, transparent 100%),
   radial-gradient(circle at 50% 96%, transparent 0%, transparent 5%, var(--bg) 5%, var(--bg) 15%, transparent 15%, transparent 100%),
   linear-gradient(to right, transparent 0%, transparent 40%, var(--frame) 40%, var(--frame) 60%, transparent 60%, transparent 100%);
}

<div class="frame"></div>

眼镜造型设计 CSS

Glasses shape design with CSS

html

css

shapes

css-transforms

css-shapes

设计：