CSS Ribbon Badge

.ribbon {
  position: relative;
  background: #ff4757;
  color: white;
  font-weight: bold;
  padding: 8px 24px 8px 16px;
  display: inline-block;
  margin: 20px;
}
.ribbon::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -10px;
  border-width: 10px 10px 0 0;
  border-style: solid;
  border-color: #d63031 transparent;
}
.ribbon::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(135deg, transparent 10px, #ff4757 0);
}