Skip to content

Instantly share code, notes, and snippets.

@naturallucky
Last active April 22, 2019 18:48
Show Gist options
  • Save naturallucky/91f495c96d11dac9a44e630adaa17464 to your computer and use it in GitHub Desktop.
Save naturallucky/91f495c96d11dac9a44e630adaa17464 to your computer and use it in GitHub Desktop.
<style>
.parts{
position: absolute;
}
.trapezoid{
transform: perspective(200px) rotateX(45deg);
}
.cylinder-v{
border-radius:50% / 10%;
}
.paper {
position:absolute;
background-color: #fff;
border:1pt solid black;
box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
}
</style>
<div class="" style="position:relative;width:400pt;height:360pt;border:4pt solid lightgray;">
<div class="parts trapezoid" style="border:2pt solid brown; left:100pt;top:20pt; width:60pt;height:100pt; display:flex;align-items:center;">
trapezoid
</div>
<div class="parts cylinder-v" style="border:1pt solid #55ccee; background:#aaffdd; width:80pt;height:120pt;left:270pt;top:120pt;">cylinder</div>
<div>
<div class="parts paper" style="width:100pt;height:200pt;left:124pt;top:284pt;width:40pt;height:60pt;background-color: #eee;"></div>
<div class="paper" style="left:122pt;top:282pt;width:40pt;height:60pt;background-color: #eee;"></div>
<div class="paper" style="left:120pt;top:280pt;width:40pt;height:60pt;">paper</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment