Estou usando img mas não é uma boa prática, então gostaria de usar um button com algum atributo css. É possivel?
2 Respostas
Uma alternativa seria usar os elementos pseudos :before
e :after
combinado com border
e position
você pode adicionar estas duas "cantos" inclinadas, ou seja o efeito é "simulado", exemplo:
.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>
Para os cantos conforme a altura, altere o border-width
de 20px para a altura desejada em:
.exemplo:before {
border-top: 20px solid transparent;
e
.exemplo:after {
border-bottom: 20px solid transparent;
Para ajustas a inclinação você deve alterar o border-right
e o left
de .exemplo:before
e alterar
border-left
e o right
de .exemplo:after
Podes usar CSS transform com skew
assim:
#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;
}
jsFiddle: https://jsfiddle.net/5b5eboeg/
No meu exemplo usei margin
e padding
, e outras propriedades, mas isso é opcional. O importante é o transform: skew(-20deg);
e as suas variantes para browsers diferentes.
Muda os graus de inclinamento para adaptar ao que precisas.
Para o texto não ficar também inclinado podes fazer assim (https://jsfiddle.net/5b5eboeg/1/) como o @bfavaretto referiu ou assim (https://jsfiddle.net/5b5eboeg/2/) como o @mgibsonbr referiu
-
2Eu fiquei com a impressão de que o texto na pergunta não está inclinado, enquanto o do seu exemplo está. Uma solução (gambiarra?) para isso seria colocar mais uma tag dentro, e aplicar um skew inverso nela. Commented 2/04/2015 às 19:50
-
2@bfavaretto Ou talvez duas divs com posicionamento absoluto, uma (não transformada) em cima da outra (transformada). Commented 2/04/2015 às 19:52
-
-
exatamente o que ia perguntar rs, testei font-style: normal; Commented 2/04/2015 às 19:58
-
Como a sugestão do bfavaretto funcionou bem, ela é preferível em relação à minha - mais organizado hierarquicamente, mais simples de se aplicar estilos/ações. Commented 2/04/2015 às 20:19