pointy triangles, with MAGIC!

This commit is contained in:
Andrew Cassidy 2017-11-24 16:21:12 -08:00 committed by Andrew Cassidy
parent f59fe69764
commit e4eb467185
2 changed files with 12 additions and 30 deletions

View File

@ -1,10 +1,8 @@
<li>
<a href="{{include.url}}" class="flag">
<span class="{{include.color}} flagButton">
<h3>{{include.name}}</h3>
<!-- <svg viewBox="0 0 115 50" preserveAspectRatio="none">
<polygon points="0,50 100,50, 115,25, 100,0, 0,0"/>
</svg> -->
<span class="flagText">{{include.name}}</span>
</span>
<span class="{{include.color}} flagPoint"></span>
</a>
</li>

View File

@ -168,7 +168,9 @@ ul#sidebar {
border-radius: 0 5px 5px 0;
h3 {
.flagText {
margin-block-start: 0;
margin-block-end: 0;
z-index: 2;
@ -195,34 +197,16 @@ ul#sidebar {
.flagButton {
width: 170px;
border-radius: 0;
}
/*
content: "";
display: inline-block;
position: absolute;
left: 0px;
top: 25px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.blue::after {
border-left: 20px solid $blue;
.flagPoint{
display: block;
position: relative;
left:170px;
width: 20px;
height: 50px;
mask-image: url('../svg/flag.svg');
}
.orange::after {
border-left: 20px solid $orange;
}
.green::after {
border-left: 20px solid $green;
}
.magenta::after {
border-left: 20px solid $magenta; */
}