如何创建文件夹形状的元素

Question

我试图弄清楚如何创建一个具有文件夹形状的元素，一个包含文本等其他元素的父元素。

我尝试创建的元素应如下所示：

我用剪辑路径尝试过，但包含的元素不可见。另外，边框看起来很奇怪，并且实现时右侧的背景渐变不可见（现在我注释掉了可以看到该元素）。

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

我把它完全分成不同的区域。但除了

background: white;

，可能还有更好的解决方案。

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

Answer 2

我确定之前已经回答过这个问题，但这里有一个应该允许背景图像的解决方案：

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>