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>

isherwood · Accepted Answer · 2024-01-23 20:49:57Z

3

I split it completely in different areas. But instead of the background: white;, there could be a better solution.

* {
  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>

edited Jan 23, 2024 at 20:49

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered May 20, 2022 at 17:09

Anna_B

9101 gold badge7 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maxswift Over a year ago

Thank you, your solution is close to what I try to achieve. Yeah the only problem now would be that if I want to place the element on an image or anything else the .part_two of the .header has a background-color and this would be visible on top of an element like an image

jbutler483 · Accepted Answer · 2022-06-07 18:02:52Z

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>

Collectives™ on Stack Overflow

How to create a folder-shaped element

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related