【每日鸡汤,每一个你想要学习的念头,都是未来的自己向你求救】
有这么一个需求,在一段文字中,需要给某个单词添加一个平行四边形的背景,但是文字要是垂直的
很简单,使用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%;
}
还有一个方法:就是使文字脱离平行四边形父元素,使用绝对定位。