CSS Матрица вызывает проблемы с выравниванием

Question

Я создал контейнер HTML с изогнутыми краями с 3 сторон, используя матрицу преобразования CSS. Но когда я пытаюсь добавить текст или изображения, они либо в противоположном направлении (изображение), либо перевернуты горизонтально (текст).

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

Стили:

.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;
  }
}

Любой способ чтобы исправить это?

Предварительный просмотр кода с использованием сгенерированного кода и отсутствующего изображения для демонстрации проблемы в режиме реального времени.

.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>

Это то, чего я пытаюсь достичь

Answer 1

Вам не нужно использовать преобразование. Вы можете просто использовать border-radius: 75px 75px 0px 75px;

Полный код:

.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>

Answer 2

Вам не нужно использовать свойство transform для достижения вашей цели. Ниже приведен полный код HTML и CSS. Вот 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>

Answer 3

.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>

Попробуйте, это поможет вам. Возникла проблема с вашим преобразованием.