This folded corner works on any colored background!
源码
<div class="post-it-note">
<p>This folded corner works on any colored background!</p>
</div>
<style>
body {
background: #323232;
}
div {
width: 20%;
min-width: 13em;
margin: 1em auto;
}
p {
font-family: helvetica;
font-size: 2em;
font-weight: bold;
}
.post-it-note {
padding: 2em;
background: #ffd707;
position: relative;
min-height: 10em;
}
.post-it-note:after {
content: "";
position: absolute;
bottom: -2em;
left: 0;
right: 2em;
border-width: 1em;
border-style: solid;
border-color: #ffd707;
}
.post-it-note:before {
content: "";
position: absolute;
bottom: -2em;
right: 0;
border-width: 2em 2em 0 0;
border-style: solid;
border-color: #d3b100 transparent;
}
</style>