Как срезать углы у блоков с картинкой на фоне?

Question

Как можно сделать такие же блоки со срезанными углами не используя linear-gradient и clip-path? Видел как-то можно с помощью transform(rotate).Как это делается?

body {
    background: url(https://i.pinimg.com/originals/09/8d/ea/098deacf1d889cf37399007b82667c6d.jpg) no-repeat center center fixed; background-size: cover;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin: 0;
  }
  
  .slogan {
    background: linear-gradient(135deg, transparent 20px, #2ea8e6 20px);
    margin: 10px; 
    padding: 5px; 
    max-width: 320px;
    width: 100%;
  }

  .box {
    background: linear-gradient(135deg, transparent, transparent 20px, white 20px);
    padding: 20px;
  }

    <div class="slogan">
        <div class="box">
            Ученье - свет, а неученье - тьма. Учиться никогда не поздно. Сегодня с легкостью можно обучиться
            чему угодно: было бы желание.
            Ученье - свет, а неученье - тьма. Учиться никогда не поздно. Сегодня с легкостью можно обучиться
            чему угодно: было бы желание.
            Ученье - свет, а неученье - тьма. Учиться никогда не поздно. Сегодня с легкостью можно обучиться
            чему угодно: было бы желание.
        </div>
    </div>

    <div class="slogan">
        <div class="box">
            Ученье - свет, а неученье - тьма. Учиться никогда не поздно. Сегодня с легкостью можно обучиться
            чему угодно: было бы желание.
            Ученье - свет, а неученье - тьма. Учиться никогда не поздно. Сегодня с легкостью можно обучиться
            чему угодно: было бы желание.
            Ученье - свет, а неученье - тьма. Учиться никогда не поздно. Сегодня с легкостью можно обучиться
            чему угодно: было бы желание.
        </div>
    </div>

    <div class="slogan">
        <div class="box">
            Ученье - свет, а неученье - тьма. Учиться никогда не поздно. Сегодня с легкостью можно обучиться
            чему угодно: было бы желание.
            Ученье - свет, а неученье - тьма. Учиться никогда не поздно. Сегодня с легкостью можно обучиться
            чему угодно: было бы желание.
            Ученье - свет, а неученье - тьма. Учиться никогда не поздно. Сегодня с легкостью можно обучиться
            чему угодно: было бы желание.
        </div>
    </div>

Answer 1

только с размерами поиграться надо, я не особенно старался собирая на коленке

* {
  box-sizing: border-box;
}

.big {
  position:   relative;
  
  width:      100px;
  height:     150px;

  margin:     20px;
  padding:    5px 0px 0px 7px;
  
  background: #d00000;
}

.big:before {
  content:    '';

  position:   absolute;
  left:       -20px;
  bottom:     0px;
  
  width:      20px;
  height:     calc(150px - 20px);
  
  background: #d00000;
}

.big:after {
  content:    '';

  position:   absolute;
  left:       -20px;
  top:        0px;
  
  width:      0;
  height:     0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent #d00000 transparent;
}

.small {
  position:   relative;
  z-index:    100;
  
  width:      calc(100% - 10px);
  height:     calc(100% - 10px);

  background: #ffffff;
}

.small:before {
  content:    '';

  position:   absolute;
  left:       -20px;
  bottom:     0px;
  z-index:    100;
  
  width:      20px;
  height:     calc(100% - 20px);
  
  background: #ffffff;
}

.small:after {
  content:    '';

  position:   absolute;
  left:       -20px;
  top:        0px;
  z-index:    100;
  
  width:      0;
  height:     0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent #ffffff transparent;
}

<div class = 'big'>
  <div class = 'small'>
 Какой-то текст
  </div>
</div>

Answer 2

Лови вот еще пример

body {
  background: #cbcbcb;
}

.nk {
  background: #1caaaa;
  background: linear-gradient(135deg, transparent 15px, #1caaaa 0) top left, linear-gradient(-135deg, transparent 15px, #1caaaa 0) top right, linear-gradient(-45deg, transparent 15px, #1caaaa 0) bottom right, linear-gradient(45deg, transparent 15px, #1caaaa 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  line-height: 35px;
  padding: 25px;
  max-width: 300px;
  color: #000;
  font-family: sans-serif;
}

<div class="nk">Ученье - свет, а неученье - тьма. Учиться никогда не поздно. Сегодня с легкостью можно обучиться чему угодно: было бы желание. Ученье - свет, а неученье - тьма. Учиться никогда не поздно. </div>

БЛОГ НА HUSL

Как срезать углы у блоков с картинкой на фоне?

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