如何使用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屋!
查看全文