如何制作一个带有左侧浮动图像的剪裁卡片

huangapple
go评论94阅读模式
英文:

How to make a clipped card with a floating image on the left

问题

I want to make card style like this image using CSS but I can't make this curved left side and how to make the image positioned like this.
Any help, please!

curved image

I am trying to add border-radius for this left side but it's not working as expected.

Edited after applying some helpful answers, I get that result:

result

Here's the HTML:

  1. <div class="card book" style="width:100%;">
  2.     <div class="card-body">
  3.         <div class="row">
  4.             <div class="col-4">
  5.                 <img src="{{ asset('books/images/img.png') }}">
  6.             </div>
  7.             <div class="col-8" style="padding-left:5px;">
  8.                 <h5 class="card-title">title</h5>
  9.                 <h6 class="card-text card-subtitle text-muted mb-2">subtitle </h6>
  11.                 <ul class="nav book-table-info align-items-center">
  12.                     <li class="nav-item">
  13.                         <p>الصفحات</p>
  14.                         <p>
  15.                             <span class="numero">324</span>
  16.                         </p>
  17.                     </li>
  18.                     <li class="nav-item">
  19.                         <p>lang</p>
  20.                         <p>
  21.                             en
  22.                         </p>
  23.                     </li>
  24.                     <li class="nav-item">
  25.                         <p>size</p>
  26.                         <p> MB <span class="numero">7.34</span></p>
  27.                     </li>
  28.                 </ul>
  29.             </div>
  30.         </div>
  31.     </div>
  32. </div>

And here's the CSS:

  1. .book {
  2.     clip-path: polygon(150px 0, 100% 0, 100% 100%, 0 100%, 0 150px);
  3. }
  5. .book li:before {
  6.     content: '';
  7.     position: absolute;
  8.     left: -1rem;
  9.     top: 50%;
  10.     height: 20px;
  11.     background-color: #333;
  12.     width: 2px;
  13.     opacity: .5;
  14.     transform: translate(-50%, -50%);
  15. }
  17. .book li {
  18.     margin-left: 2rem;
  19.     margin-bottom: 1rem;
  20.     position: relative;
  21. }
  23. .book p {
  24.     vertical-align: middle;
  25.     border: 0;
  26.     font-size: 12px;
  27.     text-align: center;
  28.     font-weight: 600;
  29.     position: relative;
  30. }
  32. .book img {
  33.     position: absolute;
  34.     top: -24px;
  35.     border: 1px solid #ede9e5;
  36.     max-width: 120px;
  37.     height: auto;
  38.     max-height: 200px;
  39. }

Now my problem is that the image is also clipped with the card.

英文:

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

  1. &lt;div class=&quot;card book&quot; style=&quot;width:100%&quot;&gt;
  2.         &lt;div class=&quot;card-body&quot;&gt;
  3.             &lt;div class=&quot;row&quot;&gt;
  4.                 &lt;div class=&quot;col-4&quot;&gt;
  5.                     &lt;img src=&quot;{{ asset(&#39;books/images/img.png&#39;) }}&quot;&gt;
  6.                 &lt;/div&gt;
  7.                 &lt;div class=&quot;col-8&quot; style=&quot;padding-left:5px;&quot;&gt;
  8.                     &lt;h5 class=&quot;card-title&quot;&gt;title&lt;/h5&gt;
  9.                     &lt;h6 class=&quot;card-text card-subtitle text-muted mb-2&quot;&gt;substile &lt;/h6&gt;
  11.                     &lt;ul class=&quot;nav book-table-info align-items-center&quot;&gt;
  12.                         &lt;li class=&quot;nav-item&quot;&gt;
  13.                             &lt;p&gt;الصفحات&lt;/p&gt;
  14.                             &lt;p&gt;
  15.                                 &lt;span class=&quot;numero&quot;&gt;324&lt;/span&gt;
  16.                             &lt;/p&gt;
  17.                         &lt;/li&gt;
  18.                         &lt;li class=&quot;nav-item&quot;&gt;
  19.                             &lt;p&gt;lang&lt;/p&gt;
  20.                             &lt;p&gt;
  21.                                 en
  22.                             &lt;/p&gt;
  23.                         &lt;/li&gt;
  24.                         &lt;li class=&quot;nav-item&quot;&gt;
  25.                             &lt;p&gt;size&lt;/p&gt;
  26.                             &lt;p&gt; MB &lt;span class=&quot;numero&quot;&gt;7.34&lt;/span&gt;&lt;/p&gt;
  27.                         &lt;/li&gt;
  28.                     &lt;/ul&gt;
  29.                 &lt;/div&gt;
  30.             &lt;/div&gt;
  32.         &lt;/div&gt;
  34.     &lt;/div&gt;

and here css

  1.  .book {
  2.             clip-path: polygon(150px 0, 100% 0, 100% 100%, 0 100%, 0 150px);
  3.         }
  4.   .book li:before {
  5.             content: &#39;&#39;;
  6.             position: absolute;
  7.             left: -1rem;
  8.             top: 50%;
  9.             height: 20px;
  10.             background-color: #333;
  11.             width: 2px;
  12.             opacity: .5;
  13.             -webkit-transform: translate(-50%, -50%);
  14.             -moz-transform: translate(-50%, -50%);
  15.             -ms-transform: translate(-50%, -50%);
  16.             -o-transform: translate(-50%, -50%);
  17.             transform: translate(-50%, -50%);
  18.         }
  20.         .book li {
  21.             margin-left: 2rem;
  22.             margin-bottom: 1rem;
  23.             position: relative;
  24.         }
  26.         .book p {
  27.             vertical-align: middle;
  28.             border: 0;
  29.             font-size: 12px;
  30.             text-align: center;
  31.             font-weight: 600;
  32.             position: relative;
  33.         }
  35.         .book img {
  36.             position: absolute;
  37.             top: -24px;
  39.             border: 1px solid #ede9e5;
  40.             max-width: 120px;
  41.             height: auto;
  42.             max-height: 200px;
  43.         }

now my problem is that image clipped too with card

答案1

得分: 0

你可以使用linear-gradient()来创建这个形状：

  1. background: linear-gradient(
  2.   135deg,
  3.   transparent var(--stop),
  4.   #ddd var(--stop)
  5. );

然后，定位就很容易了：

  1. .card {
  2.   position: relative;
  3.   /* ... */
  4. }
  6. .img {
  7.   position: absolute;
  8.   /* ... */
  9. }

试一下：

  1. <div>
  2.   <img src="https://picsum.photos/90/150">
  3. </div>
英文:

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

  1. background: linear-gradient(
  2.   135deg,
  3.   transparent var(--stop),
  4.   #ddd var(--stop)
  5. );

Positioning should be trivial then:

  1. .card {
  2.   position: relative;
  3.   /* ... */
  4. }
  6. .img {
  7.   position: absolute;
  8.   /* ... */
  9. }

Try it:

<!-- begin snippet: js hide: true -->

<!-- language: lang-css -->

  1. :root {
  2.   --border-radius: 5px;
  3.   --height: 160px;
  4.   --width: 250px;
  5.   --padding-tb: 2em;
  6.   --padding-rl: 1em;
  7.   --stop: 90px;
  8.   --img-bottom: 1.5em;
  9.   --body-background: #fafafa;
  10. }
  12. div {
  13.   position: relative;
  14.   box-sizing: border-box;
  15.   border-radius: var(--border-radius);
  16.   height: var(--height);
  17.   width: var(--width);
  18.   padding: var(--padding-tb) var(--padding-rl);
  19.   background: linear-gradient(
  20.     135deg,
  21.     transparent var(--stop),
  22.     #ddd var(--stop)
  23.   );
  24. }
  26. img {
  27.   position: absolute;
  28.   bottom: var(--img-bottom);
  29. }
  31. /* Demo only */
  33. body {
  34.   background: var(--body-background);
  35. }
  37. div {
  38.   margin: 3em auto;
  39.   box-shadow: 3px 3px 3px #aaa;
  40. }

<!-- language: lang-html -->

  1. &lt;div&gt;
  2.   &lt;img src=&quot;https://picsum.photos/90/150&quot;&gt;
  3. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月28日 14:32:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76350238.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定