I am using img but it is not a good practice, so I would like to use a button with some css attribute. Is it possible?
I am using img but it is not a good practice, so I would like to use a button with some css attribute. Is it possible?
An alternative would be to use the pseudo elements :before
and :after
combined with border
and position
you can add these two inclined "corners", ie the effect is "simulated", eg:
.exemplo {
color: #fff;
position: relative;/*faz os elementos pseudos acompanharem o elemento com a classe*/
display: inline-block;
background-color: #CC0000;
line-height: 20px; /*Centraliza o texto*/
height: 20px;
padding:0 10px;
margin: 0 10px;
}
.exemplo:before, .exemplo:after {
content: "";
width: 0px;
height: 0px;
top: 0px;
position: absolute;
}
.exemplo:before {
border-top: 20px solid transparent;
border-right: 5px solid #CC0000;
left: -5px;
}
.exemplo:after {
border-bottom: 20px solid transparent;
border-left: 5px solid #CC0000;
right: -5px;
}
<div class="exemplo">test</div> <div class="exemplo">test</div>
For corners by height, change the border-width
from 20px to the desired height at:
.exemplo:before {
border-top: 20px solid transparent;
and
.exemplo:after {
border-bottom: 20px solid transparent;
To adjust the slope you must change the border-right
and left
of .exemplo:before
and change
border-left
and right
.exemplo:after
%
You can use CSS transform with skew
like this:
#inclinada {
width: 100px;
height: 20px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
background: red;
cursor: pointer;
margin-left: 10px;
padding: 10px;
}
In my example I used margin
and padding
, and other properties, but this is optional. The important thing is transform: skew(-20deg);
and its variants for different browsers.
Change the degrees of inclination to fit what you need.
For the text not to be inclined too, you can do this ( link ) as @bfavaretto mentioned or so ( link ) as @mgibsonbr mentioned