Css 卡片中的自定义裁剪图片
Css Custom Crop Image in Card
我想知道如何编辑我必须制作的卡片。这里的挑战是根据模型自定义裁剪图像。我该怎么做?
我已经尝试添加这些属性 类。但是我无法控制裁剪,图像来自 DIV.
border-radius: 40px;
position: absolute;
top: -65%;
bottom: 0;
right: -25%;
overflow: hidden;
height: 162px;
width: 162px;
transform: rotate(-45deg);
感谢您的帮助
也许这可以帮助
body {
margin: 0;
}
.card-layout {
width: 800px;
margin: 100px auto;
display: table;
}
.card-layout .card-wrapper {
width: 300px;
margin: 0 auto;
background-color: #546d85;
border-radius: 15px;
box-shadow: 0px -1px 7px 1px #6b6b6b6b;
}
.card-layout .card-wrapper .image-wrapper img {
width: 100%;
height: 200px;
object-fit: cover;
border-bottom-right-radius: 80px;
border-bottom-left-radius: 80px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.card-layout .card-wrapper .text-wrapper {
padding: 25px;
text-align: center;
font-family: sans-serif;
color:#fff;
}
<div class="card-layout">
<div class="card-wrapper">
<div class="image-wrapper">
<img src="https://images.unsplash.com/photo-1631220352641-c925ee269a3e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2002&q=80">
</div>
<div class="text-wrapper">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
</div>
</div>
</div>
这个展示效果是结合的好机会:
- 一个定位
background-image
::before
和 ::after
伪元素
clip-path
工作示例:
div {
position: relative;
width: 180px;
height: 180px;
margin: 0 12px;
background: rgb(112, 173, 71) url('https://picsum.photos/176/110') no-repeat 2px 2px / 176px 110px;
border: 1px solid rgb(47, 82, 143);
border-radius: 4px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}
div::before,
div::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
background-color: rgb(68, 114, 196);
clip-path: path('M 0 0 C 60 40 120 40 180 0 L 180 0 L 180 110 L 0 110 Z');
}
div::before {
background-color: rgb(112, 173, 71);
transform: translateY(-2px);
}
<div></div>
我想知道如何编辑我必须制作的卡片。这里的挑战是根据模型自定义裁剪图像。我该怎么做?
我已经尝试添加这些属性 类。但是我无法控制裁剪,图像来自 DIV.
border-radius: 40px;
position: absolute;
top: -65%;
bottom: 0;
right: -25%;
overflow: hidden;
height: 162px;
width: 162px;
transform: rotate(-45deg);
感谢您的帮助
也许这可以帮助
body {
margin: 0;
}
.card-layout {
width: 800px;
margin: 100px auto;
display: table;
}
.card-layout .card-wrapper {
width: 300px;
margin: 0 auto;
background-color: #546d85;
border-radius: 15px;
box-shadow: 0px -1px 7px 1px #6b6b6b6b;
}
.card-layout .card-wrapper .image-wrapper img {
width: 100%;
height: 200px;
object-fit: cover;
border-bottom-right-radius: 80px;
border-bottom-left-radius: 80px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.card-layout .card-wrapper .text-wrapper {
padding: 25px;
text-align: center;
font-family: sans-serif;
color:#fff;
}
<div class="card-layout">
<div class="card-wrapper">
<div class="image-wrapper">
<img src="https://images.unsplash.com/photo-1631220352641-c925ee269a3e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2002&q=80">
</div>
<div class="text-wrapper">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
</div>
</div>
</div>
这个展示效果是结合的好机会:
- 一个定位
background-image
::before
和::after
伪元素clip-path
工作示例:
div {
position: relative;
width: 180px;
height: 180px;
margin: 0 12px;
background: rgb(112, 173, 71) url('https://picsum.photos/176/110') no-repeat 2px 2px / 176px 110px;
border: 1px solid rgb(47, 82, 143);
border-radius: 4px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}
div::before,
div::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
background-color: rgb(68, 114, 196);
clip-path: path('M 0 0 C 60 40 120 40 180 0 L 180 0 L 180 110 L 0 110 Z');
}
div::before {
background-color: rgb(112, 173, 71);
transform: translateY(-2px);
}
<div></div>