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

Question

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

Navigation

#1 by (4 votes)

2

I need to do a background like this of the image, I could do both sides using transform: skew() , but I need to do only the right side as in the image! Thanks for the help !!

MineissoIneedtoleaveitasintheimageabove.

codeIusedtodo:

<divstyle="" 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 html5 css css3

asked by anonymous 02.12.2015 / 18:08

1 answer

Check empty object AngularJS Can an exception cause the closing of a SqlConnection?

score 4 · Accepted Answer

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