href="oth.HTML", нужно href="/oth.HTML" 
@media (min-width: 400px) {} - это не media-переменная для телефона, это media-запрос, срабатывающий когда ширина больше 400px, т.е. это также и планшеты, и десктопы. Такое поведение абсолютно логично и правильно, это mobile first. Когда вы будете прописывать остальные media для устройств побольше - они будут добавлять и перезаписывать основные стили и стили из предыдущих media-запросов.@media (min-width: ...) and (max-width: ...) {} 
<div class="block">
some text
<span class="triangle"></span>
</div>.block {
width: 400px;
padding: 10px;
background: #fff;
min-height: 100px;
position: relative;
border: 1px dashed #aaa;
margin: 10px 10px 10px 40px;
}
.block span.triangle {
width: 0;
height: 0;
display: block;
position: absolute;
top: 30px; left: -30px;
border-bottom: 30px solid #fff;
border-left: 30px solid transparent;
}
.block span.triangle:before {
content: '';
width: 40px;
display: block;
position: absolute;
top: 15px; left: -35px;
border-top: 1px dashed #aaa;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.block span.triangle:after {
content: '';
width: 30px;
display: block;
position: absolute;
top: 30px; left: -30px;
border-top: 1px dashed #aaa;
}
