J'ai créé un conteneur HTML avec des bords incurvés sur 3 côtés en utilisant la matrice de transformation CSS. Mais lorsque j'essaie d'ajouter du texte ou des images, ils sont soit dans la direction opposée (image), soit inversés horizontalement (texte).

<div class="review">
  <img src="/src/images/tina.jpg" alt="tina" class="review__avatar" />
  <p class="fw-500">TINA FRANCIS</p>
</div>

Les styles sont

.review {
  background-color: white;
  border-radius: 75px 75px 75px 0px;
  transform: matrix(-1, 0, 0, 1, 0, 0);

  &__avatar {
    width: 90px;
    height: 100px;
    border-radius: 50px;
  }
}

Aucun moyen de réparer cela?

Aperçu du code à l'aide du code généré et de l'image manquante pour afficher une démonstration en direct du problème.

.review {
  background-color: white;
  border-radius: 75px 75px 75px 0px;
  transform: matrix(-1, 0, 0, 1, 0, 0);
  border: 1px solid red;
}
.review__avatar {
  width: 90px;
  height: 100px;
  border-radius: 50px;
}
<div class="review">
  <img src="https://randomuser.me/api/portraits/women/69.jpg" alt="tina" class="review__avatar" />
  <p class="fw-500">TINA FRANCIS</p>
</div>

C'est ce que j'essaie de réaliser review

0
iDev 7 avril 2020 à 06:48

3 réponses

Meilleure réponse

Vous n'avez pas besoin d'utiliser la transformation. Vous pouvez simplement utiliser border-radius: 75px 75px 0px 75px;

Code complet:

.review {
  background-color: white;
  border-radius: 75px 75px 0px 75px;
  border: 1px solid red; 
  padding:20px; 
}
.review__avatar {
  width: 90px;
  height: 100px;
  border-radius: 50px;
  margin: 0 5px;
}



<div class="review">
  <img src="https://randomuser.me/api/portraits/women/69.jpg" alt="tina" class="review__avatar" />
  <p class="fw-500">TINA FRANCIS</p>
</div>
0
Alvin Zachariah 7 avril 2020 à 04:59

Vous n'avez pas besoin d'utiliser la propriété transform pour atteindre votre objectif. Vous trouverez ci-dessous le code complet HTML et CSS. Voici le CodePen.

HTML

<div class="background">
    <div class="review">
      <span>
        <img src="https://randomuser.me/api/portraits/women/69.jpg" alt="tina"            class="review__avatar" />
      </span>
      <p class="fw-500">TINA FRANCIS</p>
    </div>
  <div class="review-text">
    <h5>Love it</h5>
    <span>*****</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
</div>

CSS

*{
  box-sizing: border-box;
}
.background{
  background-color: green;
  color: white;
  max-width: 500px;
  padding: 30px;
  border-radius: 75px 75px 0 75px;
  display: flex;
  flex-direction: row;
}
.review{
  align-items: center;
  display: flex;
  flex-direction: column;
}
.review__avatar{
  border-radius: 50%;
  width: 90px;
}
.review-text{
  padding: 0 0 0 20px;
}
.review-text h5{
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
}
.review-text span{
  color: yellow;
  letter-spacing: 5px;
  font-size: 18px;
  margin: 0;
}
.review-text p{
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 1px;
}
*{
  box-sizing: border-box;
}
.background{
  background-color: green;
  color: white;
  max-width: 500px;
  padding: 30px;
  border-radius: 75px 75px 0 75px;
  display: flex;
  flex-direction: row;
}
.review{
  align-items: center;
  display: flex;
  flex-direction: column;
}
.review__avatar{
  border-radius: 50%;
  width: 90px;
}
.review-text{
  padding: 0 0 0 20px;
}
.review-text h5{
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
}
.review-text span{
  color: yellow;
  letter-spacing: 5px;
  font-size: 18px;
  margin: 0;
}
.review-text p{
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 1px;
}
<div class="background">
    <div class="review">
      <span>
        <img src="https://randomuser.me/api/portraits/women/69.jpg" alt="tina"            class="review__avatar" />
      </span>
      <p class="fw-500">TINA FRANCIS</p>
    </div>
  <div class="review-text">
    <h5>Love it</h5>
    <span>*****</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
</div>

enter image description here

0
Rahul 7 avril 2020 à 05:10
.review {
  background-color: white;
  border-radius: 75px 75px 75px 0px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  border: 1px solid red;
  padding: 25px;
}
.review__avatar {
  width: 90px;
  height: 100px;
  border-radius: 50px;
}
.background {
  padding:10px;
  background-color: red;    
}
<div class="background">
    <div class="review">
        <img src="https://randomuser.me/api/portraits/women/69.jpg" alt="tina"            class="review__avatar" />
        <p class="fw-500">TINA FRANCIS</p>
    </div>
</div>

Essayez ceci, cela vous aidera. Il y a eu un problème avec votre transformation.

0
Rajan Girsa 7 avril 2020 à 04:54