html - 为图像制作波浪效果
问题描述
* {
box-sizing: border-box;
}
.container{
display:flex;
flex-direction: column;
width: 600px;
height: 600px;
}
.image{
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url('https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg')
}
.box-1, .box-2{
display:flex;
flex-direction: row;
flex-basis: 50%;
}
.image, .content{
border: 1px solid black;
flex-basis: 50%;
}
.content{
padding: 30px;
}
<div class="container">
<div class="box-1"><div class="image"></div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt,</div></div>
<div class="box-2"><div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.</div>
<div class="image"></div></div>
</div>
从上面的结果我想创建这样的东西:
所以这个想法是为两个图像创建圆角,但我想让列连接,所以圆角应该连接到我显示蓝线的地方
有没有人知道如何解决这个问题?
解决方案
然后考虑clip-path
简单地使图像的 flex-basis 更大:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
width: 600px;
height: 600px;
}
.image {
background-size: 100% 100%;
background-image: url('https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg')
}
.box-1,
.box-2,
.content{
display: flex;
flex-basis: 50%;
}
.content {
padding: 30px;
}
/* below the added code */
.image {
flex-basis:70%;
}
.box-1 .image {
clip-path: circle(farthest-side at 20% 50%);
}
.box-2 .image {
clip-path: circle(farthest-side at 80% 50%);
}
<div class="container">
<div class="box-1">
<div class="image"></div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt,</div>
</div>
<div class="box-2">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.</div>
<div class="image"></div>
</div>
</div>
响应式版本的另一个想法:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 600px;
}
.image {
background-size: 100% 100%;
background-image: url('https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg')
}
.box-1,
.box-2{
display: flex;
flex-basis: 50%;
}
.content {
padding: 30px;
flex:1;
}
/* below the added code */
.image {
--d:600px;
flex-basis:calc(50% + 20px);
}
.box-1 .image {
clip-path: circle(var(--d) at calc(100% - var(--d)) 50%);
}
.box-2 .image {
clip-path: circle(var(--d) at calc(var(--d)) 50%);
}
<div class="container">
<div class="box-1">
<div class="image"></div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt,</div>
</div>
<div class="box-2">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.</div>
<div class="image"></div>
</div>
</div>
使用 CSS 掩码:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 600px;
}
.image {
background-size: 100% 100%;
background-image: url('https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg')
}
.box-1,
.box-2{
display: flex;
flex-basis: 50%;
}
.content {
padding: 30px;
flex:1;
}
/* below the added code */
.image {
--d:300px; /* adjust here to control the curve */
flex-basis:calc(50% + 43px); /* and here to rectify the gap */
}
.box-1 .image {
-webkit-mask:
linear-gradient(#fff,#fff) left/calc(100% - var(--d)) 100%,
radial-gradient(circle var(--d) at calc(100% - var(--d)) 50%,#fff 99%,transparent);
-webkit-mask-repeat:no-repeat;
}
.box-2 .image {
-webkit-mask:
linear-gradient(#fff,#fff) right/calc(100% - var(--d)) 100%,
radial-gradient(circle var(--d) at var(--d) 50%,#fff 99%,transparent);
-webkit-mask-repeat:no-repeat;
}
<div class="container">
<div class="box-1">
<div class="image"></div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt,</div>
</div>
<div class="box-2">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.</div>
<div class="image"></div>
</div>
</div>
推荐阅读
- python - SQL Server LAN 连接在 .py 中有效,但在 exe 中无效
- angular - 在儿童中访问路线参数
- php - 在 WooCommerce 中使用 AJAX 更新购物车运输数据
- c++ - 如何更好地理解嵌套循环?
- airflow-scheduler - Apache Airflow - DAG 中有多少任务太多了?
- ruby - 如何使用 Ruby 将 ASN1::DEROctetStrng 转换为 ASN1::ASN1Sequence?
- django - Django 模型迁移:错误——尝试添加不可为空的字段
- node.js - 套接字 IO websockets 问题
- verilog - 有没有办法可以使用输入来确定时钟周期?
- c# - 在 HTTPWebRequest 期间从 NameResolutionFailure 错误中恢复