Как создать разворачивающуюся ленту?

Question

Я ищу способ запрограммировать разворачивающуюся ленту.

Итак, у меня есть этот код здесь:

.ribbon {
  position: absolute;
  top: 20px;
  right: 0;
  padding: 15px;
}

.ribbon-content {
  position: relative;
  width: 100%;
  height: 100px;
  border: 1px solid #DDD;
}

.ribbon.base {
  background: #666666;
  color: #fff;
  border-right: 5px solid #666666;
}

.ribbon.light {
  background: #ecf0f1;
  color: #2c3e50;
  border-right: 5px solid #dde4e6;
}

.ribbon.dark {
  background: #131313;
  color: #fff;
  border-right: 5px solid #464646;
}

.ribbon.base-alt {
  background: #9cd70e;
  color: #fff;
  border-right: 5px solid #c6f457;
}

.ribbon.red {
  background: #e91b23;
  color: #fff;
  border-right: 5px solid #f2787d;
}

.ribbon.orange {
  background: #ff8a3c;
  color: #fff;
  border-right: 5px solid #ffc7a2;
}

.ribbon.yellow {
  background: #ffd800;
  color: #fff;
  border-right: 5px solid #ffe866;
}

.ribbon:before,
.ribbon:after {
  content: '';
  position: absolute;
  left: -9px;
  border-left: 10px solid transparent;
}

.ribbon:before {
  top: 0;
}

.ribbon:after {
  bottom: 0;
}

.ribbon.base:before {
  border-top: 27px solid #666666;
}

.ribbon.base:after {
  border-bottom: 27px solid #666666;
}

.ribbon.light:before {
  border-top: 27px solid #ecf0f1;
}

.ribbon.light:after {
  border-bottom: 27px solid #ecf0f1;
}

.ribbon.dark:before {
  border-top: 27px solid #131313;
}

.ribbon.dark:after {
  border-bottom: 27px solid #131313;
}

.ribbon.base-alt:before {
  border-top: 27px solid #9cd70e;
}

.ribbon.base-alt:after {
  border-bottom: 27px solid #9cd70e;
}

.ribbon.red:before {
  border-top: 27px solid #e91b23;
}

.ribbon.red:after {
  border-bottom: 27px solid #e91b23;
}

.ribbon.orange:before {
  border-top: 27px solid #ff8a3c;
}

.ribbon.orange:after {
  border-bottom: 27px solid #ff8a3c;
}

.ribbon.yellow:before {
  border-top: 27px solid #ffd800;
}

.ribbon.yellow:after {
  border-bottom: 27px solid #ffd800;
}

.ribbon span {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

<div class="container bootstrap snippet">
  <div class="row mb-20">
    <div class="col-md-3">
      <div class="ribbon-content">
        <div class="ribbon base"><span>New: I'm a new feature.</span></div>
      </div>
    </div>
  </div>
</div>

Теперь мне нужно как-то изменить код, чтобы отображалось только слово - New.
Когда я навожу курсор на слово, лента должна выдвигаться влево, пока не будет виден весь текст.
Когда я увожу курсор с ленты, она должна убираться обратно.

Возможно ли это с плавной анимацией? Мне нужно быть уверенным, что вся лента выдвигается, потому что длина текста может быть разной.

_{Свободный перевод вопроса How can I create a foldable ribbon? от участника @Mr. Jo.}

Answer 1

Я бы упростил ваш код, как показано ниже, тогда им будет легко управлять с помощью анимации ширины:

.ribbon {
  --c:red;   /* Color */
  --s:20px; /* Size */
  --p:10px; /* padding*/
  
  padding:var(--p);
  border-left:calc(var(--s)/2) solid transparent;
  display:inline-block;
  background:
    linear-gradient(to top    right,transparent 48%,var(--c) 50%) border-box,
    linear-gradient(to bottom right,transparent 48%,var(--c) 50%) border-box,
    var(--c) padding-box;
  background-size:var(--s) 100%;
  background-repeat:no-repeat;
  color:#fff;
  margin-bottom:5px;
}

.ribbon > span {
  display:inline-block;
  white-space:nowrap;
  max-width:0px;
  transition:0.3s all;
  overflow:hidden;
  vertical-align:bottom;
}
.ribbon:hover > span {
  display:inline-block;
  white-space:nowrap;
  max-width:180px;
  transition:1s all;
}

body {
 text-align:right;
}

<div class="ribbon">
  NEW:<span> Some text here</span>
</div>
<br>
<div class="ribbon" style="--c:blue;--s:25px">
  NEW: <span>Some long long  text here</span>
</div>
<br>
<div class="ribbon" style="--c:purple;--s:45px;--p:15px">
  NEW: <span>text</span>
</div>
<br>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Как создать разворачивающуюся ленту?

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