<div class="gg-shape-triangle"></div>
<!-- Triangle from css.gg -->
body {
background-image: linear-gradient(to top, #242a3b 0%, #1e2331 100%);
height: 100vh;
overflow: hidden;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
color: white;
--ggs:6;
}
.gg-shape-triangle {
position: relative;
transform: scale(var(--ggs,1));
width: 22px;
height: 17px;
border-left: 3px solid transparent;
border-bottom: 3px solid
}
.gg-shape-triangle,
.gg-shape-triangle::before {
display: block;
box-sizing: border-box;
border-right: 3px solid transparent
}
.gg-shape-triangle::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-left: 3px solid;
border-top: 3px solid;
border-bottom: 3px solid transparent;
transform: rotate(45deg) skew(10deg,10deg);
left: -2px;
bottom: -13px
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.