0

So, I rotated a div using transform: skewY(8deg);, I wanted to rotate the div's content back to it's original state using transform: skewY(-8deg);, while it does kind of work, it doesn't seem to have an effect on a#buy. Is there a way around it, or an easy fix?

My HTML:

<div class="offers">
            <div id="offer1">
                <img id="ak" src="./img/AK.png">
                <p id="name">AK</p>
                <p id="price">57,53€</p>
                <p id="wear">0.0647</p>
                <a id="buy" href="linkhere">Buy</a>
            </div>
</div>

My CSS:

div.offers {
    display: flex;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    margin-top: 632px;
    text-align: center;
    height : 400px;
}

div.offers div#offer1 {
    position: relative;
    display: inline-block;
    background-color: #514538;
    width: 250px;
    height: 350px;
    border: 2px solid #FFA500;
    margin: auto;
    transform: skewY(8deg);
    margin-top: 50px;
}

div.offers div#offer1 p#name, p#price, p#wear, a#buy {
    transform: skewY(-8deg);
}
IAmAze
  • 17
  • 3
  • 8

1 Answers1

1

I assume you're talking only about the buy href? You can fix this by changing it's display property. Same for any other elements that have this in the future. The href is inline so it will ignore properties such as skew but also margin until you make it either for example inline-block or block.

So simply do:

a#buy {
   display: inline-block;
   /*or*/
   /*display: block;*/
}

Also while you're at it. Why not change #buy to a class (.buy) instead? It seems like a property you might re-use more often. Same for some of the other id's.

Rayco
  • 117
  • 7