3

Tenho pesquisado sobre o assunto, mas não sei muito sobre css e estou com duvidas de como fazer essa forma.

Uma das maneiras que achei foi dessa forma

HTML e CSS

.coracao {
   position: absolute;
}
.circulo-1 {
      border-top-left-radius: 0;
      border-top-right-radius: 0;

      width: 200px;
      margin-top: 0px;
      height: 300px;
      border-radius: 50%;
      box-shadow: rgb(255, 208, 0);
}
<div class="coracao">
   <div class="circulo-1"></div>
</div> 

Porem não sai dessa forma, todas as maneiras que faço não se estabiliza da maneira que quero!

No espaço em branco ira entrar uma logo da empresa de exemplo!

  • eu estou tentando com uma unica fazer ela ficar desta forma,
  • não sei se é sobre posto
  • se tiver algo sobre posto, deve ser possível colocar uma logo em cima,

ja pensei em faser a imagem e por no lugar, mas preciso que o site também seja responsivo, a parte responsiva ja consegui fazer, porem essa forma para fica no canto da tela não estou conseguindo fazer e gostaria da ajuda de quem sabe CSS para me mostrar alguns comandos de como poderia fazer esse formato, sei que é possível fazer imagens magnificas com CSS, mas ainda não sou tão pratico pois estou aprendendo!

Materia de pesquisa usada por mim: https://www.maujor.com/tutorial/css3-funcao-css-calc.php https://www.maujor.com/tutorial/propriedades-css-para-estilizacao-de-bordas.php https://helabs.com/artigos/2014/11/14/o-poder-do-css-3-desenhando-formas/ https://www.w3schools.com/css/

Quem puder ajudar fico grato.

inserir a descrição da imagem aqui

Duvidas de como é o layout por completo: inserir a descrição da imagem aqui

18
  • 4
    Caro @CelsoMarigoJr entendo sua boa intenção, o problema é que não dá para saber se o "corte" é no elemento em laranja (um div, logo quadrado), ou seja se o corte é interno, não dá para saber se é um objeto sobreposto, não dá para ter ideia alguma do que ele quer de fato e uma solução assim pode ser na verdade o caminho não ideal para o resultado desejado, seria melhor esperar ele revisar/editar a pergunta, as vezes especular é bom, outras vezes não
    – Syzoth
    Commented 28/05/2019 às 13:18
  • 1
    @GuilhermeNascimento correto, concordo. É que eu entendo que as vezes o cara precisa de uma dica rápida, só quis ajudar. Mas entendo que a intenção da comunidade é gerar conhecimento, e esse tipo de pergunta não atende a este proposito. Commented 28/05/2019 às 13:21
  • 1
    Samuel vc precisa ter conteúdo dentro da parte branca, essa parte seria um container de conteúdo? Seria apenas um background? A parte branca na verdade é transparente, vai ter algo aparecendo ali por traz como por exemplo a cor do body? Esses são detalhes que fazem toda a diferença para poder te responder. Então explique melhor o que realmente precisa, assim vc não perde tempo com respostas que não te servem e a gente não perde tempo te respondendo algo que não é exatamente o que vc precisa... Se vc editar a sua pergunta com mais detalhas a comunidade pode Votar para Reabri-la :)
    – hugocsl
    Commented 28/05/2019 às 13:36
  • 2
    Caro Samuel, não foi não (uma pergunta de CSS), foi algo vago, que não dá para saber o que exatamente precisa e sua corrida aqui foi baseado em preciso de uma solução qualquer para resolver um trabalho pessoal, o que não é escopo do site, já que não fazemos o trabalho de ninguém, oque fazemos é buscar e responder com boas soluções para perguntas que estejam bem elaboradas, com todo perdão, a sua pergunta no momento é impossivel de dizer qual o caminho ideal para resolver, porque realmente podem ser inumeras maneiras e nenhuma delas pode ser o que lhe atende.
    – Syzoth
    Commented 28/05/2019 às 13:37
  • 1
    @hugocsl obrigado, irei fazer as alterações, muito obragado Commented 28/05/2019 às 13:38

1 Resposta 1

5

Vc pode usar radial-gradiente para fazer essa forma, o resultado fica bem fiel a imagem e vc ainda tem a vantagem da transparência caso quera deixa visível a cor de fundo do container.

Aqui vc pode ler mais sobre o radial-gradiente: https://developer.mozilla.org/pt-BR/docs/Web/CSS/radial-gradient

Modelo aplicando essa técnica, repare que tem uma div com classe .topo e dentro dela eu tenho um <img> com position:absolute que vai ser a logo alinhada no bottom/right. Já o radial-gradiente está como background dessa div.topo com a logo dentro. OBS: Vc pode brincar com os valores do background-size e background-position até achar algo que te agrade mais.

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
aside {
	width: 200px;
	height: 100%;
	background-color: silver;
}
.topo {
	position: relative;
	width: 100%;
	height: 200px;
	margin-bottom: 20px;
	background-image: radial-gradient(closest-side at 60% 55%, transparent 49%, rgb(177, 123, 6) 49.5%, #C88D16 52%, #FDD371 85%);
    background-size: 320% 250%;
    background-position: 60% 30%;
	background-repeat: no-repeat;
}
.topo img {
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 80px;
	height: auto;
}
<aside>
	<div class="topo">
		<img src="https://placecage.com/100/100">
	</div>
	<div class="item">
		<img src="https://placecage.com/20/20">
		<span>Lorem, ipsum.</span>
	</div>
	<div class="item">
		<img src="https://placecage.com/20/20">
		<span>Lorem, ipsum.</span>
	</div>
</aside>

2
  • 1
    Show cara, muito obrigado. Testei aqui funcionou do jeitinho que preciso! Muito Obrigado, vou estudar a matéria que me passou Commented 28/05/2019 às 21:16
  • 1
    @SamuelSampaio que bom que deu certo, foi difícil arredondar a pergunta, mas isso tb serve como aprendizado né. Não deixe de ler o link e pesquisar mais sobre linear-gradient, essa técnica ajuda em vários casos, com certeza vc vai precisar dela novamente no futuro. []´s
    – hugocsl
    Commented 28/05/2019 às 21:19

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 .