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>
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!