CSS3 - Jak zrobić taki kształt?

Question

Nie wiem jak zrobić takie zaokrąglenie do środka. Będę wdzięczny za wyjaśnienie.

Answer 1

http://stackoverflow.com/questions/12447865/create-concave-corners-in-css

Lub bardziej zmyślne: http://stackoverflow.com/questions/25091139/concave-curve-with-only-css-a-compound-shapes-in-css

Answer 2

To jest akurat bardzo proste ;)

HTML:

<div id="rectangle">
  <div id="circle"></div>
</div>

CSS:

#rectangle {
	width: 100px;
	height: 100px;
	background: red;
}
#circle {
    margin-left: 50px;
	width: 100px;
	height: 100px;
	background: white;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

Jak to działa? Jest to bardzo proste. Tutaj wykorzystałem dwa elementy div. Pierwszy jest prostokątem, a nawet kwadratem. Drugi natomiast to koło. Div circle umieściłem w divie rectangle. Aby "rysunek" sprawiał efekt wcięcia, przesunąłem go o 50 px w prawo popatrz na pierwszą linijkę w bloku dla diva circle 

Comments

Nawet dobry efekt!

---

Nie nadaje się do użycia. Nie masz overflow: hidden dla #rectangle, ponieważ #circle będzie wystawać i przykrywać część strony:

https://i.imgur.com/WMV1JOq.png

Natomiast jak dodamy overflow hidden:

https://i.imgur.com/hoMe3l9.png

Tak więc jest to rozwiązanie bardzo nieelastyczne.

Tego typu efekty uzyskuje się nie poprzez "odejmowanie" (bo trudno tak odjąć. Łatwo przykryć, ale wtedy uzyskujemy to co podlinkowałem), tylko poprzez "dodawanie" elementów do boków prostokątu.

Answer 3

Udało mi się uzyskać taki efekt:

Kod Css:

*, *:before, *:after{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
.css-shapes-preview{ 
    position: relative; 
    height: 250px; 
    width: 0px; 
    background-color: #FCFCFC; 
    border-radius: 0px; 
    top: -2px; 
    -webkit-transform: rotate(270deg) skew(0deg); 
    transform: rotate(270deg) skew(0deg); 
    border-left: 100px solid #0E1E2B; 
    border-right: 100px solid #0E1E2B; 
    border-bottom: 63px solid transparent; 
}

Kod Html:

<div class="css-shapes-preview"></div>

Polecam: https://coveloping.com/tools/css-shapes-generator

Answer 4

Po prostu stwórz oddzielną grafikę dla takiego efektu lub zastosuj dwa kształty w CSS: szary prostokąt i koło o kolorze tła - razem wyjdzie pożądany efekt.

Comments

Mógłbym zrobić oddzielną grafikę, ale takie rozwiązanie mnie nie zadowala. Chciałem zrobić to za pomocą CSS. Nie zrobię kółka w kolorze tła, bo tło mam obrazkowe.

---

To chyba zostaje ci skorzystanie z grafiki, bo trudno mi powiedzieć, jak możnaby było stworzyć taki kształt z jednego elementu.

---

Ciekawi mnie, kto nadawał mi tyle głosów w dół? Przecież nie powiedziałem nic głupiego...