Question 176622 in Html Question posted in
Some basic documentation can be found here.

How do I create a card with a floating image on the left side in HTML?

I want to make card style like this image using css but I can’t make this curved left side and how make image positioned like this
any help please !
curved image

I am trying to add border radius for this left side but not work like expected.

Edited
after apply trying some answers that was helpful
i get that result
result

and here 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>

and here 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;
        }

now my problem is that image clipped too with card

Tags:

2

Answers


  1. 0

    You may check clip-path, also Clippy is a useful tool to create such a shape.

    div {
  width: 200px;
  height: 120px;
  background-color: blue;
  border-radius: 8px;
  clip-path: polygon(100px 0, 100% 0, 100% 100%, 0 100%, 0 80px);
}
    <div></div>
    Login or Signup to reply.
  2. 0

    You can use a linear-gradient() to create the shape:

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

    Positioning should be trivial then:

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

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

    Try it:

    :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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search