css - 响应式带状标题

Question

我正在尝试为我正在工作的网站制作一个带状标题，但我正在努力让文本很好地适应较小的分辨率。

有没有办法让文本响应式，或者在较小的屏幕上流到双行？

我已将代码放入 JS fiddle 中以显示我正在使用的内容 here.

h3.ribbon {
background: #c3d5d8;
margin-top: 0px !important;
margin-left: -30px;
padding-left: 20px;
color: #fff;
border-bottom: 40px solid #c3d5d8;
border-right: 20px solid #fff;
height: 0px;
line-height: 40px;
font-size: 18px !important;
font-family: 'ProximaNovaThin';
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-weight: bold;}

Answer 1

您可以为此使用倾斜的伪元素，允许文本在需要时换行。

.title {
  display: inline-block;
  width: 70%;
  min-height: 50px;
  line-height: 50px;
  background: lightgray;
  position: relative;
}
.title:before {
  content: "";
  position: absolute;
  height: 100%;
  min-width: 120px;
  width: 40%;
  left: 80%;
  background: lightgray;
  transform: skewX(45deg);
  z-index: -1;
}

<div class="title">this is a long title............................a really long title! Like a super long title that should require a second line!</div>