0

what I have is two skewed parallelogram-like shapes and what I want to do is to stop the font inside them from going "italic" (as you can see in the CSS code below, I have it set to bold). enter image description here

.left-bar {
    transform: skew(-30deg); /* Equal to skewX(10deg) */
    background-color:#00A0DF;
    color: whitesmoke;
    width: 250px;
    height: 250px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    float: left;
  }

  .right-bar {
    transform: skew(-30deg); /* Equal to skewX(10deg) */
    background-color:#425CC7;
    color: whitesmoke;
    width: 250px;
    height:250px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    float: right;
  }
<div class="container-fluid text-center h-100 ">
    <div class="row mt-3">
                <div class="col left-bar text-center mr-3 pt-5">Find your favorite product</div>
        <div class="col right-bar text-center ml-1 mt-5  pt-5">In two easy steps</div>
</div>
</div>

Any ideas on how to solve this? Would also like to hear some advice on how to skew only one side of the shape, but that's another topic.

George Sun
  • 968
  • 8
  • 21
Leon Horka
  • 153
  • 2
  • 15

1 Answers1

1

.left-bar {
    transform: skew(-30deg); /* Equal to skewX(10deg) */
    background-color:#00A0DF;
    color: whitesmoke;
    width: 250px;
    height: 250px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    float: left;
  }
  
  .right-bar {
    transform: skew(-30deg); /* Equal to skewX(10deg) */
    background-color:#425CC7;
    color: whitesmoke;
    width: 250px;
    height:250px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    float: right;
  }
  
  .left-bar span,
  .right-bar span{
        display:inline-block;
        transform: skew(30deg);  
  }
<div class="container-fluid text-center h-100 ">
    <div class="row mt-3">
        <div class="col left-bar text-center mr-3 pt-5"><span>Find your favorite product</span></div>
        <div class="col right-bar text-center ml-1 mt-5  pt-5"><span>In two easy steps</span></div>
</div>
</div>
Azu
  • 1,494
  • 2
  • 6
  • 11