How to transform (cut) only one side of the element with css?

Asked

Viewed 900 times

2

I need to do a background like that of the image, I was able to do both sides using the transform: skew(), But I need to do it on the right side as in the image! I appreciate the help!!

mine is so I need to leave as in the image above.

inserir a descrição da imagem aqui

code I used to make:

<div  style="" class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
            <p>PRÊMIOS EM DESTAQUE</p>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-4 col-xs-6" style="padding: 2px; background-color: #e9670e; top: 51px"></div>

div{
   padding-top: 10px; 
   background-color: #e9670e; 
   top: 15px; color: white
}
html css html5 css3

  • What you have so far?

  • 1

    Can’t do this effect with border? then you can only do one side.

  • Paul edited the question and put what I have so far.

  • Where’s the CSS that does the effect ?

  • Ta no style, I’ll put it separately

  • 1

    Jeez... but then it won’t work anyway. You have to create a class and call in the element. That’s good practice. Using CSS INLINE is not good practice unless it’s for emails.

  • I updated my post.

Show 2 more comments

1 answer

4


.efeito{
      color: white;
      height: 0px;
      line-height: 0;
      border-top: 40px solid transparent;
      border-right: 40px solid transparent;
      border-bottom: 40px solid orange;
      line-height: 40px;
      text-indent: 20px;
      width: 50%;
      font-family: "Roboto";
      font-size: 14px;
      font-weight: bolder;
      position: relative;
}
.efeito:after{
      content: "";
      position: absolute;
      background-color: orange;
      height: 4px;
      width: 30px;
      top: 36px;
      right: -60px;
}
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 efeito">
  PRÊMIOS EM DESTAQUE
</div>

  • I’ll do the same hauhauhauha

  • Yes. Edit your question and enter your code. Just what you need. DIV and CSS. Put in your question, not here. Hard to understand.

  • thanks, it worked!!

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.