помогите пожалуйста с блоками

Question

мучаюсь уже много времени никак не могу сообразить. Как сделать так, чтоб маленький див (с красной полоской border) распологался не справа как сейчас, а слева.

.divisus {
  height: 370px;
  padding-top: 50px;
  width: 70%;
  box-shadow: 2px 2px 5px;
}
.painus {
margin: 2em;
    margin-left: 80%;
    position: relative;
    box-shadow: 2px 2px 5px;
    height: 200px;
    width: 500px;
    background: white;
    border-right:40px solid red;
}
.painus:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 265px;/* offset value to mind */
  pointer-events:none; /* takes it off the way, else negative z-index might do also */
}

<div class="divisus">
  <div class="painus">
  </div>
</div>

пробовал менять местами блоки - все равно маленький оставался справа. пример того, где должен распологаться маленький блок

Answer 1

Что-то вроде этого?

.divisus {
  height: 370px;
  padding-top: 50px;
  width: 70%;
  box-shadow: 2px 2px 5px;
  /* Чтобы показать где что */
  margin-left: 80%;
}

.painus {
  margin: 2em;
  position: relative;
  box-shadow: 2px 2px 5px;
  height: 200px;
  width: 500px;
  background: white;
  border-left: 40px solid red;
  transform: translateX(-80%);
}

.painus:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 265px;
  pointer-events: none;
}

<div class="divisus">
  <div class="painus"></div>
</div>

БЛОГ НА HUSL

помогите пожалуйста с блоками

Ответы (1 шт):