Geometric shape with css

Asked

Viewed 389 times

3

I have researched on the subject, but I don’t know much about css and I’m having doubts about how to make this way.

One of the ways I found it was this way

HTML and 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>

But it doesn’t come out that way, all the ways I do it doesn’t stabilize the way I want it to!

In the white space will enter a logo of the example company!

  • I’m trying with a single make her stay this way,
  • I don’t know if it’s about rank
  • if you have something on post, it should be possible to put one right on top,

I’ve thought about making the image and putting it in place, but I need the site to also be responsive, the responsive part I’ve been able to do, however this form to stay in the corner of the screen I am not able to do and I would like the help of who knows CSS to show me some commands of how could make this format, I know it is possible to make magnificent images with CSS, but I’m still not as practical as I am learning!

Research material used by me: 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/

Anyone who can help I’m grateful.

inserir a descrição da imagem aqui

Doubts about how the layout is completely: inserir a descrição da imagem aqui

html css web-application

  • I didn’t test that... But take a look at this Chrome extension: https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp?hl=pt-BR

  • 4

    Dear @Celsomarigojr I understand your good intention, the problem is that it is not possible to know if the "cut" is in the element in orange (a div, then square), IE if the cut is internal, it is not possible to know if it is an overlapping object, can’t get any idea what he really wants and a solution like this can actually be the way not ideal for the desired result, it would be better to wait for it to revise/edit the question, sometimes speculating is good, sometimes not

  • 1

    @Guilhermenascimento correct, I agree. Is that I understand that sometimes the guy needs a quick tip, just wanted to help. But I understand that the intention of the community is to generate knowledge, and this kind of question does not meet this purpose.

  • How could I have asked the question?

  • @Guilhermenascimento could help me in how I could make a publication?

  • Sorry Samuel, what you said is not clear yet, what would be "publication"? If you are referring to improving the question, I recommend you read: https://answall.com/help/minimal-reproducible-example, understand what is needed and how to ask yourself and then only edit the question after this so that we can help you.

  • @Guilhermenascimento What I did was not a publication referring to a debt I have about css?

  • 1

    Samuel you need to have content inside the white part, would that part be a container of content? Would it just be a background? The white part is actually transparent, is there going to be something appearing there behind, as for example the color of the body? These are details that make all the difference in order to answer you. So explain better what you really need, so you don’t waste time with answers that don’t suit you and we don’t waste time answering you something that isn’t exactly what you need... If you edit your question in more detail the community can Vote to Reopen it :)

  • 2

    Dear Samuel, it wasn’t no (a CSS question), it was something vacant, you can’t know exactly what you need and your race here was based on I need some solution to solve a personal job, what is not scope of the site, since we do not do the work of anyone, what we do is seek and answer with good solutions to questions that are well prepared, with all forgiveness, your question at the moment is impossible to say what is the ideal way to solve, because they can really be innumerable ways and none of them can be what suits you.

  • 1

    @hugocsl thank you, I will make the changes, much work

  • @Guilherme Nascimento Ta good, I will review, but first I will see the extension that @ Celso Marigo Jr suggested to me because it may be useful. Even so Thank you all

  • @Guilhermenascimento I did a review, what do you think now? this better?

  • I believe that the links there is no sense and independent of presenting any code or it is not possible to determine the doubts that I mentioned in my first comment, 1. if it is a cut in orange, 2. if it is something superimposed, 3. if the overlap should be limited to orange 4. there will be other elements involved. But I think you’ll soon be able to express the need.It would be nice even if you read the link I sent you about "minimum example of the problem", that is to demonstrate how "it doesn’t stabilize"

  • @Guilhermenascimento 1.I’m trying with a single <div> to make it look like this, 2.I don’t know if it’s about rank 3. if you have something on post, it should be possible to put one right on top, 4.depending on how to put the <div>

  • I understand Samuel, but really if you read the link I gave you will understand that it is no use to write a lot and comment, you have to edit the question and make it clear and clean, and present in a "functional" way how the problem occurs explain in a simple and clear way the problem, without beating around the bush about "help", "time is sensitive", the way this one complicates just, I hope I’m managing to guide you, I need to go now, later I’ll come back to see how this, maybe I can help you.

  • @Samuelsampaio I think if you have an image of how you would like the final layout Something that the designer or client has given you, or that you yourself have done or sketched out, can help answer you. We want to help, we just want to avoid answering something that is not what you want and have to keep replying until you guess what you really need. Sometimes with an image of the final layout can help.

  • @hugocsl final layout is already in the post

  • Now yes young!

Show 13 more comments

1 answer

5


You can use radial-gradiente to make this shape, the result is very faithful to the image and you still have the advantage of transparency case quera leaves visible the background color of the container.

Here you can read more about the radial-gradiente: https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient

Model applying this technique, notice that has a div classy .topo and inside it I have a <img> with position:absolute that will be soon aligned on the bottom/right. Already the radial-gradiente is as background of that div.topo with the logo inside. OBS: You can play with the values of background-size and background-position until you find something you like more.

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>

  • 1

    Show man, thank you very much. I tested here worked the way I need! Thank you very much, I will study the subject you gave me

  • 1

    @Samuelsampaio that good that worked, it was difficult to round up the question, but this also serves as learning right. Be sure to read the link and search further on linear-gradient, this technique helps in several cases, for sure you will need it again in the future. [] s

Browser other questions tagged html css web-application

You are not signed in. Login or sign up in order to post.