Как сделать специфическую подложку текста?

Question

Как сделать специфическую подложку текста, как на картинке, не меняя HTML, то есть, чтобы текст был одним тегом без переносов?

Вот что у меня получилось, но правильно работает только в хроме. в мозилле и сафари глючит

.blog__title{
  width: 220px;
}
.blog__title a {
  color: #004ec8;
  background: #f7e568;
  font-size: 17px;
  font-weight: 700;
  display: inline;
  padding: 2px 5px 4px 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  position: relative;
  text-decoration: none;
  line-height: 28px;
}
.blog__title a:after {
  content: "";
  width: 35px;
  height: 25px;
  background: linear-gradient(135deg, #f7e568 50%, transparent 50%);
  display: inherit;
  float: right;
  position: absolute;
  right: -32px;
  left: inherit;
  bottom: 0px;
}

<div class="blog__title">
<a href="#">Дежурство скорой помощи на мероприятиях</a>
</div>

Answer 1

.wrapper {
  background: #e8f1ff;
  padding: 1rem;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.text {
  position: relative;
  color: #004fc8;
  background: #f7e569;
  font-size: 2rem;
  display: inline-block;
  margin: .1rem;
  padding: 0 .5rem;
  z-index: 10;
  position: relative;
  overflow: hidden;
}

.text:last-of-type {
padding-right: 3rem;
}

.text:last-of-type:after{
  content: "";
  display: inline-block;
  position: absolute;
  background: #c5dcfe;
  width: 5rem;
  height: 5rem;
  transform: rotate(-45deg);
  right: -3rem;
}

.bg-right {
  position: absolute;
  background: #c5dcfe;
  height: 400%;
  width: 100%;
  transform: rotate(-55deg);
  left: 50%;
  top: -50%;
}

<div class="wrapper">
  <div class="bg-right"></div>
  <div class="text">Дежурство скорой помощи</div>
  <br>
  <div class="text">на мероприятиях</div>
</div>

Answer 2

Вот такой вариант, с использованием linear-gradient

.text-wrapper {
  display: inline-block;
  padding: 10px;
  background: linear-gradient(115deg, #e8f1ff 50%, #c5dcfe calc(50% + .5px));
  color: #004fc8;
  font-size: 200%;
  font-weight: 400;
  font-family: -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,"Noto Sans Armenian","Noto Sans Bengali","Noto Sans Cherokee","Noto Sans Devanagari","Noto Sans Ethiopic","Noto Sans Georgian","Noto Sans Hebrew","Noto Sans Kannada","Noto Sans Khmer","Noto Sans Lao","Noto Sans Osmanya","Noto Sans Tamil","Noto Sans Telugu","Noto Sans Thai",sans-serif;
}

.text-wrapper > p {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 3px;
  background: #f7e569;
  box-sizing: border-box;
}

.text-wrapper > p:not(:last-child) {
  margin-bottom: 3px;
}

.text-wrapper > p:last-child {
  max-width: calc(100% - 1.5rem);
  position: relative;
}

.text-wrapper > p:last-child::after {
  content: '';
  display: block;
  width: 1.5rem;
  height: 100%;
  background: linear-gradient(135deg, #f7e569 50%, transparent calc(50% + .5px));
  position: absolute;
  top: 0;
  left: 100%;
  bottom: 0;
}

<div class="text-wrapper">
  <p>Дежурство скорой помощи</p><br>
  <p>на мероприятиях</p>
</div>

БЛОГ НА HUSL

Как сделать специфическую подложку текста?

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