Currently, I am working on creating a responsive header for a website. The image provided is a rough draft of the header design that I am aiming to achieve. I attempted to form the shape using an SVG path but encountered difficulties in making it fully responsive. Thus, I am seeking advice on alternative methods.
Here's what I have experimented with: *check out the images below to see the outcome
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>