Gostaria de saber se teria como desenha a imagem abaixo utilizando somente css?
2 Respostas
Utilizando os pseudo-elementos :after
e :before
:
Na sua necessidade talvez seja necessário adaptar o código alterando os valores de top
, left
e rigth
até atingir o efeito que deseja
div{
width: 0;
height: 0;
top:40px;
left:50px;
position: relative;
border-style: solid;
border-width: 100px 130px 0 130px;
border-color: #000000 transparent transparent transparent;
}
div:before {
content: "";
display: block;
position: relative;;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
width: 200px;
height: 50px;
background-color: white;
right: 220px;
top: -80px;
}
div:after {
content: "";
display: block;
position: relative;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
width: 200px;
height: 50px;
background-color: white;
left: 20px;
top: -130px;
}
button{
width: 400px;
height: 80px;
display: block;
position: absolute;
left: 0px;
background: rgb(0, 0, 0);
border-radius: 70px;
}
<button></button>
<br/>
<div></div>
-
Teria como colocar este desenho embaixo de um botão preto para dar a impressão que esta seta pertence ao botão? Estou tentando porém ainda não consegui. Commented 28/07/2015 às 13:52
-
Como assim? Lembrando que você não está "desenhando" e sim estilizando elementos do
HTML
, poste um exemplo do código do seu botão e explique melhor qual a sua necessidade Commented 28/07/2015 às 14:13 -
Atualizei a minha pergunta com a imagem de como gostaria do botão Commented 28/07/2015 às 14:41
É possível sim, usando HTML e CSS, aqui tem um gerador para você ter uma ideia de como se faz = http://www.samuelrossille.com/css-shape/#1142AAy15z-15z-19z29z0
Sempre vai ter que ter pelo menos uma tag HTML, porque CSS é folha de estilo, ai o desenho é feito em cima do HTML.
:after
e:before
pra "criar" elementos vinculados com o elemento pai