如何使背景像顶部的SVG一样在顶部？

Question

I have been working on this website. 我一直在这个网站上工作。 I am trying to make the banner background like the svg image at the bottom. 我正在尝试使横幅背景像底部的svg图像一样。 I don't want to use a picture as the background, so I have been using CSS background-image. 我不想使用图片作为背景，所以我一直在使用CSS background-image。 I am using clip-path because it makes it easier to hide portion of the picture. 我使用的是剪切路径，因为它可以更轻松地隐藏图片的一部分。

Is there any way I can make the point where the bottom left corner radius meet with the straight line rounded, so it can look like the SVG image at the bottom, please? 有什么办法可以使左下角半径与圆角直线相交的点，因此它看起来像底部的SVG图像吗？

 header { position: relative; overflow: hidden; height: 800px; background-image: linear-gradient(315deg, #6c2aad 0%, rgb(44, 80, 199) 74%); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 200px), 0 100% ); border-bottom-left-radius: 50% 50%; } .header-bg{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; } #banner-content { height: inherit; position: relative; display: flex; flex-direction: row; justify-content: center; } #banner-image-container img { position: absolute; left: 0; bottom: 50px; } #banner-image-container { align-self: flex-end; margin: 0 7%; height: 410px; } #right-side { align-self: center; margin: 0 7%; max-width: 420px; text-align: center; color: #FFF; } #right-side p:first-child { font-size: 30px; font-weight: bold; } @media screen and (min-width: 551px) { #right-side { align-self: center; margin: 0 7%; } } #banner-content img { max-width: 600px; width: 70%; display: block; margin: 0 auto; } @media screen and (max-width: 724px) { #banner-content { flex-direction: column-reverse; justify-content: flex-start; } #banner-image-container { align-self: center; } }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <header id="banner"> <div class="header-bg"></div> <div id="banner-content"> <div id="banner-image-container"> <img src="http://webcomics.co/wp-content/uploads/sites/10/2010/09/James-mugshot.png" alt=""/> </div> <div id="right-side"> <p>LOREM IPSUM</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </header> <div class="back"> <svg width="1600px" height="612px" viewBox="0 0 1600 612" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path d="M0,0.111104331 L1600,5.68434189e-14 L1600,344.091288 C1112.04518,489.644113 740.739648,576.663624 486.083401,605.14982 C376.998796,617.352174 281.625713,612.768489 207.849921,583.94285 C136.196666,555.946528 66.9133592,475.996007 0,344.091288 L0,0.111104331 Z" id="path-1"></path> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Artboard"> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"></use> </mask> <use id="Mask" fill="#071246" fill-rule="nonzero" xlink:href="#path-1"></use> </g> </g> </svg> </body> </html>

Answer 1

You can approximate it using pseudo element and some rotation combined with radius: 您可以使用伪元素和一些结合了半径的旋转对其进行近似：

 header { position: relative; overflow: hidden; height: 800px; z-index: 0; } header:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: -200px; background-image: linear-gradient(315deg, #6c2aad 0%, rgb(44, 80, 199) 74%); border-bottom-left-radius: 35% 35%; transform: rotate(-18deg); transform-origin: left; } .header-bg { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; } #banner-content { height: inherit; position: relative; display: flex; flex-direction: row; justify-content: center; } #banner-image-container img { position: absolute; left: 0; bottom: 50px; } #banner-image-container { align-self: flex-end; margin: 0 7%; height: 410px; } #right-side { align-self: center; margin: 0 7%; max-width: 420px; text-align: center; color: #FFF; } #right-side p:first-child { font-size: 30px; font-weight: bold; } @media screen and (min-width: 551px) { #right-side { align-self: center; margin: 0 7%; } } #banner-content img { max-width: 600px; width: 70%; display: block; margin: 0 auto; } @media screen and (max-width: 724px) { #banner-content { flex-direction: column-reverse; justify-content: flex-start; } #banner-image-container { align-self: center; } }

 <header id="banner"> <div class="header-bg"></div> <div id="banner-content"> <div id="banner-image-container"> <img src="http://webcomics.co/wp-content/uploads/sites/10/2010/09/James-mugshot.png" alt="" /> </div> <div id="right-side"> <p>LOREM IPSUM</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </header> <div class="back"> <svg width="1600px" height="612px" viewBox="0 0 1600 612" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path d="M0,0.111104331 L1600,5.68434189e-14 L1600,344.091288 C1112.04518,489.644113 740.739648,576.663624 486.083401,605.14982 C376.998796,617.352174 281.625713,612.768489 207.849921,583.94285 C136.196666,555.946528 66.9133592,475.996007 0,344.091288 L0,0.111104331 Z" id="path-1"></path> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Artboard"> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"></use> </mask> <use id="Mask" fill="#071246" fill-rule="nonzero" xlink:href="#path-1"></use> </g> </g> </svg>

如何使背景像顶部的SVG一样在顶部？

问题描述

1 个解决方案

解决方案1
0 2019-01-22 22:19:07

如何使背景像顶部的SVG一样在顶部？

问题描述

1 个解决方案

解决方案1 0 2019-01-22 22:19:07

解决方案1
0 2019-01-22 22:19:07