CSS 그라데이션을 사용

CSS 그라데이션을 사용하여 텍스트에 멋진 느낌을 더해보세요 box-decoration-break: clone.

 

.box {
  display:inline-block;
  font-weight:bold;
  font-family:sans-serif;
  font-size:45px;
}
.box span {
   line-height: 1.3em;
   padding: 0.05em 0.6em;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
}
.one span {
   color: #fff;
   --g: #0000 .5em,#f03355 calc(.5em + 1px);
   background: 
     linear-gradient(115deg,var(--g)) left,
     linear-gradient(-65deg,var(--g)) right;
   background-size:51% 100%; /* use 51% instead of 50% to avoid gaps */
   background-repeat:no-repeat;
}
.two span {
  color: #f03355;
  /* I consider +/-1px to avoid jagged edges */
  --g1:#0000 .5em,#f03355 calc(.5em + 1px) calc(.5em + 3px),#0000 calc(.5em + 4px);
  --g2:#0000 calc(.5em + 3px),#f03355 0;
  background: 
    linear-gradient(115deg,var(--g1)) left,
    linear-gradient(115deg,var(--g2)) top left,
    linear-gradient(-65deg,var(--g1)) right,
    linear-gradient(-65deg,var(--g2)) bottom right;
  background-size:50% 100%,calc(100% - 3px) 3px;
  background-repeat:no-repeat;
}
.three span {
  color: #fff;
  --g:#0000 0 25%,#25b09b 0 50%;
  background: 
    repeating-conic-gradient(from -45deg at left ,var(--g)) 0    0,
    repeating-conic-gradient(from -45deg at right,var(--g)) 100% 0;
  background-size:51% var(--s,100%);
  background-repeat:repeat-y;
}