andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Autoscoping (#103)

Browse Source 
* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction
This commit is contained in:
atomiks
2018-10-05 09:18:51 +10:00
committed by GitHub
parent 2afb2fe88a
commit 11eff23e47
41 changed files with 107 additions and 1102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
snippets/triangle.md
View File

@ -22,60 +22,6 @@ Creates a triangle shape with pure CSS.
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__triangles">
<div class="snippet-demo__triangle snippet-demo__triangle-1"></div>
<div class="snippet-demo__triangle snippet-demo__triangle-2"></div>
<div class="snippet-demo__triangle snippet-demo__triangle-3"></div>
<div class="snippet-demo__triangle snippet-demo__triangle-4"></div>
<div class="snippet-demo__triangle snippet-demo__triangle-5"></div>
</div>
</div>
<style>
.snippet-demo__triangles {
display: flex;
align-items: center;
}
.snippet-demo__triangle {
display: inline-block;
width: 0;
height: 0;
margin-right: 0.25rem;
}
.snippet-demo__triangle-1 {
border-top: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
.snippet-demo__triangle-2 {
border-bottom: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
.snippet-demo__triangle-3 {
border-left: 20px solid #333;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.snippet-demo__triangle-4 {
border-right: 20px solid #333;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.snippet-demo__triangle-5 {
border-top: 40px solid #333;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
</style>
#### Explanation
[View this link for a detailed explanation.](https://stackoverflow.com/q/7073484)