如何使用svg制作曲线标题或使用其他响应式解决方案 [英] how to make a curved header with svg or with another responsive solution
本文介绍了如何使用svg制作曲线标题或使用其他响应式解决方案的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道是否有人能指出正确的方向/或最佳方法的标题，如下图所示。我不是一名开发人员，所以我正在酝酿。
这里是我的代码。我可以如何实现在上图中制作完全相同的标题？
* {-moz-box-sizing：border-box; -webkit-box-sizing：border-box;盒子尺寸：边框;填充：0; margin：0;}：root {--red-color：＃FF5F6D; --white色：#FFFFFF; - 黄色：＃fff9c4;} body {padding：0; margin：0;}。wrapper {display：grid; grid-template-columns：1fr; text-align：center; align-items：center; justify-content：center; } .wrapper> * {font-size：1.5rem; font-weight：800;}。t-orange-nav {background-color：var（ - red-color）;颜色：var（ - 黄色）; position：relative;}。t-orange-nav> div {border-bottom：3px纯白色;最大宽度：800px;保证金：0汽车; padding：20px 0;}。t-orange-nav p {font-size：10px;}。t-orange-header {padding：20px 0; background-color：var（ - red-color）; height：200px;颜色：var（ - 黄色）;宽度：100％;保证金：0汽车;背景：线性梯度（＃FF5F6D，＃FFC371）; } .t-orange-section {background-color：var（ - white-color）;颜色：＃FF5F6D; height：300px;宽度：95％;保证金：0汽车; } .t-orange-section> div {border-bottom：3px纯黑色; max-width：1000px;保证金：0汽车; padding：100px 0;}。t-orange-article {background-color：var（ - white-color）;颜色：＃FF5F6D; height：300px;宽度：95％;保证金：0汽车; } .t-orange-article> div {border-bottom：3px纯黑色; max-width：1000px;保证金：0汽车; padding：100px 0;}。t-orange-aside {background-color：var（ - white-color）;颜色：var（ - 红色）; height：200px; } .t-orange-footer {background-color：var（ - red-color）;}颜色：var（ - 黄色）; height：50px;}
< html lang =en >< HEAD> < meta charset =UTF-8> < meta name =viewportcontent =width = device-width，initial-scale = 1.0> < meta http-equiv =X-UA-Compatiblecontent =ie = edge> < link rel =stylesheethref =style.css> <标题>< /标题>< /头><身体GT; < div class =wrapper> < nav class =t-orange-nav> < DIV> nav< / div> < / NAV> < header class =t-orange-header> < DIV> HEADER< / div> < /报头> < section class =t-orange-section> < DIV>部分< / div> < /节> < article class =t-orange-article> < DIV>文章< / div> < /冠词GT; < aside class =t-orange-aside>撇开< / aside> < footer class =t-orange-footer>页脚< /页脚> < / div>< / body>< / html>
h2_lin>解决方案
您可以为此使用SVG图像。只需将以下代码复制到您的html中，或者将其保存为.svg扩展名并将其用作常规图像即可。
<？xml version =1.0encoding =utf-8？>< svg id =svgversion =1.1style =display：block; viewBox =0.148 0.121 399.909 187.745xmlns =http://www.w3.org/2000/svg> < DEFS> < pattern id =pattern-0x =0y =0width =25height =25patternUnits =userSpaceOnUseviewBox =0 0 100 100> < rect x =0y =0width =50height =100style =fill：black;/> < /图案> < linearGradient id =gradient-3gradientUnits =userSpaceOnUsex1 =221.781y1 = - 17.569x2 =221.781y2 =162.313gradientTransform =matrix（-0.999997,0.002512，-0.002478， - 0.986265,326.399578,161.652725）spreadMethod =pad> < stop offset =0style =stop-color：rgb（254，199，131）;/> < stop offset =1style =stop-color：rgb（253，122，126）;/> < /&的LinearGradient GT; < / DEFS> < g id =svgg> < path id =path1d =M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0stroke =nonefill-rule =evenoddstyle =fill：url（＃gradient-3）;/> < / svg>
I am trying to make a curved header. And I am wondering if anyone can point me the right direction/or the best method the header as in the following image. I am not a developer so I am slogging.
here is the image of the theme and curved header
And here is my code.How can I achieve to make exactly the same header on the above image?
*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
:root{
--red-color:#FF5F6D;
--white-color:#FFFFFF;
--yellow-color:#fff9c4;
}
body{
padding: 0;
margin: 0;
}
.wrapper{
display: grid;
grid-template-columns: 1fr;
text-align: center;
align-items: center;
justify-content: center;
}
.wrapper >*{
font-size: 1.5rem;
font-weight: 800;
}
.t-orange-nav{
background-color: var(--red-color);
color: var(--yellow-color);
position: relative;
}
.t-orange-nav > div {
border-bottom: 3px solid white;
max-width: 800px;
margin: 0 auto;
padding: 20px 0;
}
.t-orange-nav p {
font-size: 10px;
}
.t-orange-header{
padding: 20px 0;
background-color: var(--red-color);
height: 200px;
color: var(--yellow-color);
width: 100%;
margin: 0 auto;
background: linear-gradient(#FF5F6D , #FFC371 );
}
.t-orange-section{
background-color: var(--white-color);
color: #FF5F6D;
height: 300px;
width: 95%;
margin: 0 auto;
}
.t-orange-section > div {
border-bottom: 3px solid black;
max-width: 1000px;
margin: 0 auto;
padding: 100px 0;
}
.t-orange-article{
background-color: var(--white-color);
color: #FF5F6D;
height: 300px;
width: 95%;
margin: 0 auto;
}
.t-orange-article > div {
border-bottom: 3px solid black;
max-width: 1000px;
margin: 0 auto;
padding: 100px 0;
}
.t-orange-aside{
background-color: var(--white-color);
color: var(--red-color);
height: 200px;
}
.t-orange-footer{
background-color: var(--red-color);
color: var(--yellow-color);
height: 50px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<div class="wrapper">
<nav class="t-orange-nav">
<div>
nav
</div>
</nav>
<header class="t-orange-header">
<div>
HEADER
</div>
</header>
<section class="t-orange-section">
<div>
section
</div>
</section>
<article class="t-orange-article">
<div>
article
</div>
</article>
<aside class="t-orange-aside">
aside
</aside>
<footer class="t-orange-footer">
footer
</footer>
</div>
</body>
</html>
解决方案
You may use a SVG image for that. Just copy the code below in your html or save it with a .svg extension and use it as a regular image.
<?xml version="1.0" encoding="utf-8"?>
<svg id="svg" version="1.1" style="display: block;" viewBox="0.148 0.121 399.909 187.745" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="pattern-0" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
<rect x="0" y="0" width="50" height="100" style="fill: black;"/>
</pattern>
<linearGradient id="gradient-3" gradientUnits="userSpaceOnUse" x1="221.781" y1="-17.569" x2="221.781" y2="162.313" gradientTransform="matrix(-0.999997, 0.002512, -0.002478, -0.986265, 326.399578, 161.652725)" spreadMethod="pad">
<stop offset="0" style="stop-color: rgb(254, 199, 131);"/>
<stop offset="1" style="stop-color: rgb(253, 122, 126);"/>
</linearGradient>
</defs>
<g id="svgg">
<path id="path1" d="M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0" stroke="none" fill-rule="evenodd" style="fill: url(#gradient-3);"/>
</g>
</svg>
这篇关于如何使用svg制作曲线标题或使用其他响应式解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
