卡片中的 Css 自定义裁剪图像答案

【问题标题】：Css Custom Crop Image in Card卡片中的 Css 自定义裁剪图像
【发布时间】：2021-11-06 20:02:33
【问题描述】：

我想知道如何编辑我必须制作的卡片。这里的挑战是根据模型自定义裁剪图像。我该怎么做？

我已经尝试添加这些属性类。但我无法控制裁剪，图像来自 DIV。

border-radius: 40px;
position: absolute;
top: -65%;
bottom: 0;
right: -25%;
overflow: hidden;
height: 162px;
width: 162px;
transform: rotate(-45deg);

感谢您的帮助

【问题讨论】：

标签： css image layout crop

【解决方案1】：

这个展示效果是一个很好的组合机会：

定位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);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

也许这会有所帮助

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>

【讨论】：