How to create a folder-shaped element

Question

I am trying to figure out how I can create an element that has a folder shape, a parent element which contains other elements like text.

The element I am trying to create should look like this:

I tried it with a clip-path, but the containing elements aren't visible. Also the border is looking weird and the right background gradient isn't visible when implemented ( now I commented it out that the element can be seen).

 div { display:inline-block; color:red; margin:20px; filter:url(#round); } #test::before{ content:""; width: 250px; height: 250px; display:block; background-color: grey; /*background: linear-gradient(148.18deg, rgba(255, 255, 255, 0.4) -9.28%, rgba(255, 255, 255, 0.15) 143.96%);*/ border: 1px solid black; clip-path: polygon(0 0, 50% 0, 50% 20%, 100% 20%, 100% 100%, 0 100%); }

 <div id="test"> <p>Be the first to know. Trage dich in unseren Newsletter ein, um einen exklusiven Zugang und einmaligen Rabatt noch vor unserem offiziellen Launch zu erhalten.</p> </div> <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="round"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg>

Answer 1

Does this help you?

 * { box-sizing: border-box; font-family: sans-serif; } .box { width: 300px; } .box .header .part_one, .box .header .part_two, .box .content { background-color: rgb(220, 220, 220); } .box .header { display: flex; } .box .header .part_one { width: 200px; height: 30px; } .box .header .part_two { width: 100px; height: 30px; position: relative; } .box .header .part_two:before { content: ""; position: absolute; bottom: 0px; left: 0; height: 30px; width: 100%; border-bottom-left-radius: 10px; background: white; } .box .content { height: 200px; border-radius: 0px 10px 10px 10px; padding: 10px; } .box .header .part_one { width: 200px; border-radius: 10px 10px 0px 0px; }

 <div class="box"> <div class="header"> <div class="part_one"></div> <div class="part_two"></div> </div> <div class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> </div>

Maybe someone could improve it. I split it completely in different areas. But instead of the background: white; , there could be a better solution. Maybe it doesn't matter if you have a background with just one color?

Answer 2

I'm sure this has been answered before, but here is a solution which should allow for a background image:

 html{ background:url(https://picsum.photos/1000/2000); } .wrapper{ display:inline-block; position:relative; height:300px; width:50%; background:rgba(255,255,255,0.7); margin-top:30px; border-radius: 0 10px 10px 10px; } .wrapper:before{ content:"some tab"; position:absolute; top:0; left:0; transform:translateY(-30px); background:inherit; display:inline-block; height:30px;width:50%; border-radius:10px 10px 0 0; text-align:center; line-height:30px; } /*for the bevel after the tab*/ .tab{ position:absolute; top:-20px; right:50%; display:inline-block; height:20px; width:20px; transform:translateX(100%); overflow:hidden; } .tab:before{ content:""; position:absolute; top:0;left:0;height:100%;width:100%; box-shadow:0 0 0 100px rgba(255,255,255,0.7); border-radius: 0 0 0 100%; }

 <div class="wrapper"> <div class="tab"></div> <div class="chatArea">lorem ipsum</div> </div>