Zastanawiam sie jak za pomoca CSS moge uzyskac efekt odwroconego border radiusa, cos w tym stylu:
Z tym ze u mnie jest odstep pomiedzy contentem a sidebarem i chcialbym je polaczyc w podobn sposob jak wyzej. Tutaj moj kod:
Docelowy rezultat powinien wygladac jakos tak: 
nie musi być odwrócony.
żeby osiągnąć efekt jak z pierwszego screena, pewnie wystarczyłoby umieścić szary element z wypukłym border radiusem po lewej stronie (oraz radiusy dla elementu przed i po)
coś w tym stylu https://jsfiddle.net/3zhf7ctd/
@LukeJL probowalem zrobic tak jak na tym screnie:
Tutaj kod: https://jsfiddle.net/qnpb1t46/63/
Problem jest taki ze zabraklo mi trzeciego pseudo elementu bo ::before uzylame na prostokat a ::after na gorny radius wiec musze jeszcze cos z dolnym wykombinowac.
EDIT Dodalem dodatkowy element zeby miec kolejny pseudo element dostepny: https://jsfiddle.net/qnpb1t46/91/ . Pytanie czy da sie to zrobic jakos bardziej elegancko czy sposob jest dobry?
Sam pomysł że to jest "odwrócony border-radius" to jest za dużo kombinowania. Ja bym do tego użył <svg/> albo {clip-path}, żeby po prostu narysować kształt który chcesz i tyle.
@LukeJL Ci dobrze pisze, nie widzę struktury dom, ale po prostu w tle folderów 2 i 4 zrób tło o kolorze dużego diva i potem ustaw dla nich odpowiednio dla folderu 2 - prawy dolny róg, dla folderu 4 - prawy górny i masz efekt jaki chciałeś. Folder 3 będzie miał lewą krawędz zaokrągloną. Nie potrzeba do tego żadnych pseudoelementów, ani tym bardziej rysowania czegokolwiek. Potrzebna jest tylko dobra konstrukcja drzewa. Używanie path albo svg do takich rzeczy skończy się tak, że przy ustawianiu responsywności coś Ci się zacznie rozjeżdżać i będziesz przez 2 dni rzeźbił żeby to poprawić.