【系统学习css】第二天，行内元素和块元素在一起的样式实现

【每日鸡汤，每一个你想要学习的念头，都是未来的自己向你求救】

有这么一个需求，在一段文字中，需要给某个单词添加一个平行四边形的背景，但是文字要是垂直的

很简单，使用transform： skewX(10deg)即可；要求文字不倾斜，可以先把背景倾斜，再把文字反向倾斜即可;

具体可以外层嵌套一个元素，或者使用伪元素

<div class="content">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.                 
  <span>
       Phasellus
       <i>Duis</i>
  </span>
  sit amet diam. Duis mattis varius dui. Suspendisse eget dolor
</div>

.content {
  line-height: 50px;
  font-size: 20px;
}

span {
  color: red;
  border: 1px solid blue;
  background: yellow;
  transform: skewX(30deg);
  display: inline-flex;
  align-items: center;
  height: 40px;
  border-left: 5px solid blue;
  border-right: 5px solid blue;
}
i{
  color: blue;
  border: 1px solid blue;
/*   反向倾斜 */
  transform: skewX(-30deg);
}

span::after {
  content: 'Suspendisse';
  display: inline-flex;
  align-items: center;
/*   反向倾斜 */
  transform: skewX(-30deg); 
  border: 1px solid;
  margin-left: 5px;
  height: 100%;
  
}

还有一个方法：就是使文字脱离平行四边形父元素，使用绝对定位。