时间戳

首页 > 解决方案 > 如何制作一个看起来像这样的响应式标题？*见提供的图片*

html - 如何制作一个看起来像这样的响应式标题？*见提供的图片*

问题描述

我正在为网站制作标题，它必须是响应式的，我提供的图片是我想要制作的标题的粗略模型。我试图用 SVG 路径制作形状，但我找不到让它完全响应的方法，所以我想知道是否有更好的方法。

我尝试过的：*使用图片查看结果

body {
  background-color: rgb(255, 255, 255);
  overflow-x: hidden;
}

#topLine {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  height: 2vh;
  width: 110vw;
  background: linear-gradient(178.8deg, rgb(255, 95, 30) 0%, rgb(255, 95, 30) 60%, rgb(185, 15, 0) 100%);
}

#topLineLogo {
  position: absolute;
  left: 0%;
  height: 8vh;
  width: 40vw;
  background: linear-gradient(179.6deg, rgb(255, 95, 30) 0%, rgb(255, 95, 30) 40%, rgb(185, 15, 0) 100%);
  border-bottom-right-radius: 50%;
  z-index: -1;
}

#topLineLogoFill {
  position: absolute;
  left: 0%;
  transform: translate(10%, 0%) rotate(-3deg);
  width: 50vw;
  height: 5vh;
  background: rgb(255, 95, 30);
  z-index: -2;
}

svg polyline,
svg line,
svg path {
  fill: rgb(255, 255, 255);
  stroke: rgb(225, 95, 10);
}
<div id="topLine"></div>
<div id="topLineLogo"></div>
<div id="topLineLogoFill"></div>
<svg height="15vh" width="90vw" viewBox="0 0 1000 100">
     <path d="M363,44.2 Q363,3.6 700,8.6" />
</svg>
所需结果的粗略模型

我尝试过的结果

我在调整大小时尝试过的结果

标签： htmlcss

解决方案

你可以做这样的事情。您可以通过更改和/或.background__white的值来调整曲线。border-radiusheight

.container {
  width: 100%;
  height: 50px;
}
.background__orange {
    width: 100%;
    height: 50px;
    background-color: orange;
}
.background__white {
  background-color: white;
  border-radius: 2000px;
  height: 100px;
  width: 100%;
  position: absolute;
  left: 40%;
  top: 25px;
}
<div class="container">
  <div class="background__orange">
  </div>
  <div class="background__white">
  </div>
</div>

推荐阅读