创建菱形使文本斜体

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

为了防止文字歪斜：

将文本包裹在一个元素内。
对 child 应用反向偏斜元素即 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>

Answer 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>

创建菱形使文本斜体

Creating Rhombus makes text italic

css

css-shapes