3

Gostaria de saber se teria como desenha a imagem abaixo utilizando somente css? inserir a descrição da imagem aqui

Gostaria de criar um botão deste jeito inserir a descrição da imagem aqui

4
  • Você pode utilizar :after e :before pra "criar" elementos vinculados com o elemento pai Commented 28/07/2015 às 12:19
  • 2
    É possível... Só acredito que não terá alguém disposto a fazer isso por ti.
    – KaduAmaral
    Commented 28/07/2015 às 12:20
  • "desenha" é diferente de "desenhar".. de qualquer forma, veja esse link: jsfiddle.net/stackmanoz/VbgKW Commented 28/07/2015 às 12:21
  • Relacionada: Como fazer essa flecha em CSS
    – Jorge B.
    Commented 28/07/2015 às 12:49

2 Respostas 2

4

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>

3
  • 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
3

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .