Sticky Card
<style>
* { box-sizing: border-box;}
.stickyCard {
min-height:200px;
width:100%;
max-width:300px;
background-color:#ff8f8f;
padding: 14px 35px;
position:relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.6);
border:5px solid white;
margin:5px;
}
.stickyCard::after {
content:'';
border:10px solid #7efcd2;
border-bottom-color:transparent;
position:absolute;
top:0;
left:10px;
height:5px;
box-shadow: 0px -2px 0 #1f1f1f,1px -2px 2px rgba(0,0,0,0.2);
}
.stickyCard .topic{text-align:center;font-size:20px}
.stickyCard hr{border-color:#1a1a1a;}
</style>
<div class="stickyCard">
<div class="topic">Sticky Topic !<hr></div>
<div>Sticky content ... !</div>
</div>Sticky Topic !
Sticky content ... !
.stickyCard{
background-color:#ff8f8f;
}Sticky Topic !
Sticky content ... !
.stickyCard{
background-color: #f0f0f0;
}Sticky Topic !
Sticky content ... !
.stickyCard{
background-color: #c8ffc7;
}
.stickyCard::after{
border-color:#aaa #aaa transparent
}Sticky Topic !
Sticky content ... !
.stickyCard{
background-color: #fff9c4;
}
.stickyCard::after{
border-color:#ff8f8f #ff8f8f transparent;
}
Sticky Topic !
Sticky content ... !
.stickyCard{
background-color: #c7fffd;
}
.stickyCard::after{
border-color:#aaa #aaa transparent
height:20px;
}Sticky Topic !
Sticky content ... !
.stickyCard{
background-color: #fff9c4;
}
.stickyCard::after{
border-color:#ff8f8f #ff8f8f transparent;
height:20px;
}
Sticky Topic !
Sticky content ... !
.stickyCard{
background-color: white;
border-radius: 15px 45px;
border-color:#ebfcfc;
}Sticky Topic !
Sticky content ... !
.stickyCard{
background-color: yellow;
border-radius: 15px 45px 45px;
}Sticky Topic !
Sticky content ... !
.stickyCard{
background-color: #f1f1f1;
color:white;
}
.stickyCard hr{border-color:white;}
Sticky Topic !
Sticky content ... !
.stickyCard{
background-color: #f1f1f1;
color:#fe309d;
}
.stickyCard hr{border-color:white;}
So,