/ / uzyskać ten sam kształt w css [duplicate] - html, css, css3

uzyskać ten sam kształt w css [duplicate] - html, css, css3

Mam obraz. Chcę, aby dokładny kształt w css. Czy ktoś może mi powiedzieć, jak zrobić ten kształt w css? Wszelkie sugestie i pomoc będą znaczące.

Aktualizacja Jest to gładka krzywa na obrazie

Oto obraz wprowadź opis obrazu tutaj

Odpowiedzi:

3 dla odpowiedzi № 1

Zrobiłem ci ten fragment kodu:

HTML:

<div class="shape">
<div> </div>
</div>

CSS:

.shape {
background: lightblue;
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
.shape > div {
background: white;
width: 1000px;
height: 1000px;
border-radius: 100%;
position: absolute;
margin-left: -150%;
margin-top: -125%;
}

Musisz zagrać trochę z szerokościami, wysokościami i marginesami, aby dostosować je do swoich potrzeb.

Sprawdź również to DEMO.


0 dla odpowiedzi nr 2

pracujący

<style>

#pre-container{
background-color: white;
border-radius: 600px;
height: 742px;
width: 600px;
position: absolute;
z-index: 2;
right: 550px;
top: -400px;

}

#post-container{
background-color: #e5e5e5;
width: 400px;
height: 200px;
margin: 0 auto;
position: absolute;
right: 200px;
}


</style>
<html>
<body>
<div id="pre-container"></div>
<div id="post-container"></div>
</div>
</body>


</html>

0 dla odpowiedzi № 3

Kształt, który tam masz, jest w zasadzie niepełnym okręgiem obejmującym prostokąt. Możesz utworzyć okrąg w CSS, ustawiając dopasowanie height, width i border-radius:

#circle {
border-radius: 200px;
height: 200px;
width: 200px;
}

Następnie z pewnym pozycjonowaniem absolutnym możesz kontrolować jego pozycję w obrębie prostokąta:

#container {
background-color: #aaa;
height: 100px;
position: absolute;
width: 200px;
}

#circle {
border-radius: 200px;
height: 200px;
width: 200px;

left: -100px;
position: absolute;
top: -100px;
}

Przykład roboczy tutaj: http://jsfiddle.net/L3yP6/1/


0 dla odpowiedzi nr 4

możesz to osiągnąć, używając :before pseudo element. Użyłem tego 200px wysokość i width. jeśli zmienisz wysokość, z którą musisz się bawić top or left pozycja.

Poza tym tylko jeden div jest wystarczająco dużo, aby osiągnąć ten efekt.

Sprawdź PRÓBNY.

div{background:#008080; width:200px; height:200px;}
div:before{
content: "";
width: 200px;
height: 200px;
display:block;
position:absolute;
top:-8px;
left:-75px;
background:#ffffff;
border-radius:100%;
transform: skewY(-40deg);
}