<div class="triangle-right"></div>
.triangle-right {
border-image: none;
height: 30px;
width: 150px;
background-image: linear-gradient(to top, rgb(207, 207, 213) 0%, rgb(135, 129, 129) 50%, rgb(207, 207, 213) 100%);
}
.triangle-right:after{
content:"";
display: block;
height: 0;
border-left:20px solid black;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
}
<div><a class="navbar-brand" href="#"><img src="img/logo.png" class="img-responsive" alt="Blockchain"></a></div>
<a class="navbar-brand" href="#"><img src="img/logo.png" class="img-responsive" alt="Blockchain"></a>
<body>
//= template/header.html
//= template/content.html
//= template/footer.html
</body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220px" height="140px" viewBox="0 0 220 140">............
</svg>
Желательно без использования облегчающих инструментов типа пре- и постпроцессоров, бутсрапа, сторонних библиотек
"Мои знания HTML\CSS3(с фреймворками и препроцессорами), ванильный JS и jQuery, Основы PHP."- так вот после всего этого вам просто необходимо изучить и использовать Bower (хотя без него можно обойтись), тот же Gulp или Webpack (как-то с трудом себе представляю жизнь без них - это сборщики проэктов), ну и Node.js для js на сервере.