CSS - How to create a button or design like this inverted like this

Question

CSS - How to create a button or design like this inverted like this

Navigation

#1 by (6 votes)
#2 by (3 votes)

-6

I would like to know how to create a box like the yellow button in the image below.

I would like to know simply how to invert the sides using CSS and HTML.

css

asked by anonymous 23.08.2018 / 16:20

2 answers

6

You can do with CSS2 and borders, without distorting the text:

.trapezio{
  display:block; position:relative; float:left;
  margin:20px;
  width:200px;                             /* largura da caixa */
  line-height:50px;                        /* altura da caixa  */
  text-align:center;
}

.trapezio:before {
  content:'';
  display:block; position:absolute;
  z-index:-1; width:0; height:100%;
  top:-10px;                               /* = angulo         */ 
  border-right: 200px solid #ccc;          /* largura da caixa */
  border-top: 10px solid transparent;      /* angulo da caixa  */
  border-bottom: 10px solid transparent;   /* angulo da caixa  */
}

.amarelo:before  {border-right-color:#fe0;}
.azul:before     {border-right-color:#36f;}
.vermelho:before {border-right-color:#f31;}

<a class="trapezio"          href="#">BUY NOW</div>
<a class="trapezio amarelo"  href="#">BUY NOW</div>
<a class="trapezio azul"     href="#">BUY NOW</div>
<a class="trapezio vermelho" href="#">BUY NOW</div>

23.08.2018 / 16:34

SQL Query with multiple conditions WHERE [closed] What web language is used in websites to make effects? [closed]

score 3 · Accepted Answer

Use the CSS property transform with perspective and rotateY . For example:

#botao {
    background: yellow;
    width: 200px;
    padding: 10px;
    text-align: center;
    font-size: 20pt;
    font-weight: bold;
    transform: perspective(10px) rotateY(-1deg);
}

<div id="botao">BUY NOW</div>

Another way of doing this, without distorting the text (Bacco's suggestion), would look like this:

.botao {
    position: relative;
    width: 200px;
    padding: 10px;
    text-align: center;
    font-size: 20pt;
    font-weight: bold;
}

.botao:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -15px;  /* compensação da rotação*/
    z-index: -1;
    background: yellow;
    width: 100%;
    height: 100%;
    transform: perspective(10px) rotateY(-1deg);
}

<div class="botao">BUY NOW</div>