3
votes

Comment créer une carte avec une image en arrière-plan en CSS découpée en diagonale

J'essaie de créer une carte en HTML / CSS, qui ressemble à:

MAIS, ce que je veux exactement, c'est que le l'arrière-plan, au lieu d'être simplement gris comme c'est le cas, est une image à la place.

Voici ce que j'ai essayé: JsFiddle

HTML:

.card {
  border: 1px solid #dadada;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.2s;
  width: 50%;
}

.card h3 {
  padding: 2px;
  margin: 8px 0;
}

.image {
  width:100%; 
  clip-path: polygon(0 0, 100% 0, 100% 42%, 0 23%);
}

CSS:

<div class="card">
  <img src="https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg" alt="Avatar" class='image'>
  <div class="container">
    <h3>John Doe</h3>
    <p>Architect & Engineer</p>
  </div>
</div>

Comme vous pouvez le voir, cela fonctionne, mais le problème est qu'il y a de l'espace entre les deux l'image et le «John Doe».

Je voudrais savoir comment supprimer l'espace entre l'image et le John Doe.

Merci

html css

2 commentaires

Vérifiez: jsfiddle.net/sxbw8afq avec le chemin de votre clip, vous coupez 58% de l'image (100 % de gauche et 42% de bas) alors commencez par changer cela en 100% 100% et 0 23% en 0 70% ou quelque chose. Ensuite, vous pouvez travailler avec l'image hauteur , object-fit et négative margin-top sur h3 pour l'ajuster. Clip-Path masque uniquement l'élément, mais ne le modifie pas vraiment, donc les autres éléments (h3 et texte) se comporteront toujours comme si clip-path n'était pas là. Donc, pour déboguer, vous pouvez supprimer complètement votre clip-path et vous verrez pourquoi il y a un espace sous l'image.

Bonjour vérifier ce violon, j'ai créé une balise div au lieu de img << a href = "https://jsfiddle.net/ka5hnqf3/" rel = "nofollow noreferrer "> jsfiddle.net/ka5hnqf3 >

4 Réponses :

0
votes

Vous pouvez ajouter ce qui suit à votre css:

.card {
  height: 300px //this is your prefered height
}

Vous verrez que la hauteur de votre carte est influencée. Vous pouvez simplement donner à votre carte la hauteur que vous désirez, comme ceci:

.container {
  position: absolute;
  top: 150px;
}

0 commentaires

0
votes

.card {
  border: 1px solid #dadada;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.2s;
  width: 50%;
  height:200px;
  position:relative;
}

.card h3 {
  padding: 2px;
  margin: 8px 0;
/*   line-height: 20px !important;
  font-size: 18px !important;
  font-weight: 500 !important; */
}

.card:hover {
  box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card .container {
  padding: 2px 14px;
  position: absolute;
  top: 45%;
}

.card p {
  margin: 14px 0;
}
.card img {
  position:absolute
  }
//that's all..

1 commentaires

Les réponses basées uniquement sur le code sont déconseillées. Veuillez cliquer sur modifier et ajouter quelques mots résumant la façon dont votre code répond à la question, ou peut-être expliquer en quoi votre réponse diffère de la précédente réponse / réponses. De l'avis

1
votes

Voici une solution simple avec la transformation css.

<div class="wrapper">
  <div class="box">
    <div class="content">Here is my content.</div>
    <div class="folder"></div>
  </div>
</div>

.wrapper {
  position: relative;
  width: 280px;
  height: 350px;
  background: url('https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg') 0 0 no-repeat;
  background-size: cover;
  overflow: hidden;
}

.box {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: #cdcdcd;
}

.content {
  position: absolute;
  z-index: 10;
  padding: 15px;
  box-sizing: border-box;
}

.folder {
  position: absolute;
  top: -20px;
  left: -10px;
  width: 120%;
  height: 60px;
  background: #cdcdcd;
  transform: rotate(8deg);
}

0 commentaires

0
votes

Fiez-vous à l'arrière-plan et vous aurez un meilleur support et moins de code:

<div class="card">
    <h3>John Doe</h3>
    <p>Architect & Engineer</p>
</div>

.card {
  border: 1px solid #dadada;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.2s;
  padding:100px 10px 5px;
  width: 50%;
  background:
   linear-gradient(to bottom left,transparent 49.5%,#fff 50%) 0 50px/100% 100px,
   linear-gradient(#fff,#fff) bottom/100% calc(100% - 150px),
   url(https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg) top/100% auto no-repeat;
   background-repeat:no-repeat;
}

.card h3 {
  padding: 2px;
  margin: 8px 0;
}

0 commentaires