This just caught my eye while reading this thing. At first I searched for the image, but to my surprise it was all about CSS sorcery:
<html>
<head>
<style>
.postit {
position: relative;
display: inline-block;
width: 250px;
border-bottom-right-radius: 36px 12px;
padding: 15px 15px 10px 10px;
border: 1px solid #e0dcbf;
background-color: #fff8dc;
margin-bottom: 12px;
}
.postit::after {
content: "";
display: block;
position: absolute;
width: 80%;
height: 30px;
bottom: 18px;
right: 18px;
z-index: -1;
transform: rotate(3deg) skew(8deg);
box-shadow: 13px 18px 6px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="postit">text</div>
</body>
</html>
No comments:
Post a Comment