当先锋百科网

首页 1 2 3 4 5 6 7

如何制作一张左边有浮动图像的剪贴卡片

我想使用css制作像这张图片一样的卡片样式，但我不能制作这种弯曲的左侧，如何制作这样定位的图像 请帮忙！ 弯曲图像

我试图为这个左侧添加边界半径，但不像预期的那样工作。

编辑 申请后，尝试一些有帮助的答案 我得到了那个结果 结果

这里是html

<div class="card book" style="width:100%">
        <div class="card-body">
            <div class="row">
                <div class="col-4">
                    <img src="{{ asset('books/images/img.png') }}">
                </div>
                <div class="col-8" style="padding-left:5px;">
                    <h5 class="card-title">title</h5>
                    <h6 class="card-text card-subtitle text-muted mb-2">substile </h6>

                    <ul class="nav book-table-info align-items-center">
                        <li class="nav-item">
                            <p>الصفحات</p>
                            <p>
                                <span class="numero">324</span>
                            </p>
                        </li>
                        <li class="nav-item">
                            <p>lang</p>
                            <p>
                                en
                            </p>
                        </li>
                        <li class="nav-item">
                            <p>size</p>
                            <p> MB <span class="numero">7.34</span></p>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

    </div>

这里是css

.book {
            clip-path: polygon(150px 0, 100% 0, 100% 100%, 0 100%, 0 150px);
        }
  .book li:before {
            content: '';
            position: absolute;
            left: -1rem;
            top: 50%;
            height: 20px;
            background-color: #333;
            width: 2px;
            opacity: .5;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .book li {
            margin-left: 2rem;
            margin-bottom: 1rem;
            position: relative;
        }

        .book p {
            vertical-align: middle;
            border: 0;
            font-size: 12px;
            text-align: center;
            font-weight: 600;
            position: relative;
        }

        .book img {
            position: absolute;
            top: -24px;

            border: 1px solid #ede9e5;
            max-width: 120px;
            height: auto;
            max-height: 200px;
        }

现在我的问题是图像被卡夹住了

您可以使用线性渐变()来创建形状:

background: linear-gradient(
  135deg,
  transparent var(--stop),
  #ddd var(--stop)
);

定位应该很简单:

.card {
  position: relative;
  /* ... */
}

.img {
  position: absolute;
  /* ... */
}

试试看:

:root {
  --border-radius: 5px;
  --height: 160px;
  --width: 250px;
  --padding-tb: 2em;
  --padding-rl: 1em;
  --stop: 90px;
  --img-bottom: 1.5em;
  --body-background: #fafafa;
}

div {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  height: var(--height);
  width: var(--width);
  padding: var(--padding-tb) var(--padding-rl);
  background: linear-gradient(
    135deg,
    transparent var(--stop),
    #ddd var(--stop)
  );
}

img {
  position: absolute;
  bottom: var(--img-bottom);
}

/* Demo only */

body {
  background: var(--body-background);
}

div {
  margin: 3em auto;
  box-shadow: 3px 3px 3px #aaa;
}

<div>
  <img src="https://picsum.photos/90/150">
</div>