我一直在这个网站上工作。我正在尝试使横幅背景像底部的 svg 图像一样。我不想使用图片作为背景,所以我一直在使用CSS背景图像。我正在使用剪辑路径,因为它可以更轻松地隐藏图片的一部分。
有什么方法可以让左下角半径与直线相交的点变圆,这样它就可以看起来像底部的 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>
您可以使用伪元素和一些结合半径的旋转来近似它:
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>