i have a website, where i am trying to create a section where there are 3 columns, 1st column is a text box, second and third is an image, i want to slant the first column on right, second column left and right and third column only on left so that it will look complete. i used the following code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<section>
<div class="customer-logos1 slider" style="color:white;font-weight:400">
<div class="slide">
<div class="row">
<div class="col-lg-4 col-4" style="width: 100%;margin: 0;padding: 0;">
<div style="background:#f7f7f7;height:100%">
<div class="tm-offer-content" style="text-align:center;padding-top:25%">
<h4>Brand ear ring starting from </h1>
<h6>Our popular products are so beautiful to see that the shoppers are easily attracted to them.</h4>
<span class="badge badge-warning" style="background:#A07F3D;color:white;font-size: inherit;
padding: 0.55em 0.8em;"> Starting From 500</span>
</div>
</div>
</div>
<div class="col-lg-4 col-4" style="width: 100%;margin: 0;padding: 0;">
<img src="https://jewelit.in/admin/uploads/about/about-image.jpg" style="-ms-transform: skew(354deg,0deg);
-webkit-transform: skew(354deg,0deg);
transform: skew(354deg,0deg);">
</div>
<div class="col-lg-4 col-4" style="width: 100%;margin: 0;padding: 0;">
<img src="https://jewelit.in/admin/uploads/about/about-image.jpg">
</div>
</div>
</div>
</div>
</section>here the issue is when i use skew both the sides are getting slanted, how can just slant one side so i can match these columns, thanks in advance