创建菱形使文本斜体

Question

我想在CSS中围绕文本创建一个菱形形状。我的形状有效，但是形状中的文字现在总是斜体。

我试图设置font-weight: normal，但它没有改变任何东西。

我目前的代码是：

<span id="shape_background">
    Test text
</span>

#shape_background { 
    display: block;
    position: relative; 
    background-color: red; 
    -webkit-transform: skew(-20deg); 
    transform: skew(-20deg); 
}

Answer 1

＆＃13;

＆＃13;

#shape_background {
  display: block;
  //position: relative;
  background-color: red;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
}
#shape_background span {
  display: inline-block;
  -webkit-transform: skew(20deg);
  transform: skew(20deg);
  color: white;
}

＆＃13;

<span id="shape_background">
    <span>Test text</span>
</span>

＆＃13;

＆＃13;

＆＃13;