Уголок-загиб в css

Question

Как сделать такую ленточку (обведенная красным кружком) с помощью css?

Answer 1

данный объект можно составить из двух частей - прямоугольника (основной блок) и треугольника (вспомогательный блок)

вспомогательный блок можно сделать как :after основного блока

.image {
  position:     relative;
  margin:  50px;
}

.block {
  display:      inline-block;  
  position:     absolute;
  top:          12px;
  left:         -12px;
  
  height:       38px;
  line-height:  38px;
  
  padding:      0px 10px 0px 10px;
  
  background:   #e14d31;
  color:        #ffffff;
  
  font-family:  Arial;
  font-weight:  700;

  text-transform: uppercase;
}

.block:before {
  content:    "";

  position:   absolute;
  left:       0px;
  bottom:     -12px;
  
  width:      0;
  height:     0;
  border-style: solid;
  border-width: 0 12px 12px 0;
  border-color: transparent #8b2c18 transparent transparent;
}

.block:after {
  content:    "";

  position:   absolute;
  right:      -15px;
  
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 38px 15px 0 0;
  border-color: #e14d31 transparent transparent transparent;  
}

<div class = 'image'>
  <div class = 'block'>текст</div>
  <img src = "https://lh3.googleusercontent.com/proxy/R5HvKar5hyCzO18Mj1W021YvNLMqMnA1Yfly6wAeDzj8rB5tQHjkV_ZH8VRiom3HXMXBf5zjNhssaody">
</div>

БЛОГ НА HUSL

Уголок-загиб в css

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