创建菱形使文本斜体[重复]答案

【问题标题】：Creating Rhombus makes text italic [duplicate]创建菱形使文本斜体[重复]
【发布时间】：2015-08-24 18:07:02
【问题描述】：

我想在 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); 
}

【问题讨论】：

使文本成为
或元素，并将该元素向后旋转 20 度。

标签： css css-shapes

【解决方案1】：

为了防止文字出现歪斜效果：

将文本包装在元素内。
对子项应用反向倾斜元素，即skew(20deg)，+ve 值 20deg 来否定-20deg 的效果

#shape_background {
  display: block;
  position: relative;
  background-color: red;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
}
#shape_background .text {
  -webkit-transform: skew(20deg);
  transform: skew(20deg);
  padding-left: 5px;
}

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

【讨论】：

【解决方案2】：

#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;
}

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

【讨论】：