フルスクリーンのdivタグにボーダー付き三角形を追加する方法

Question

モバイルビューポートでフルサイズのdivを表示したい場合は、枠線の付いた三角形を使用することができます。同じプロパティと数字を微調整、私は

はHTML作品1がtriのクラスでUL、この意志で以下とCodepen here

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class=" nav-items-wrapper"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" style="margin-top:-8px;" href="/"><img style="width:50%;" src="../../../assets/logos/" alt="">brand</a> 
    </div> 
    <ul class="nav navbar-nav nav-ul"> 
    <li class="dem"> 
     <a href="#">Item 1</a> 
    </li> 
    <li class="dem"> 
     <a href="#">Dropdown3</a> 
     <ul class="tri" style="visibility: hidden"> 
      <li class="ic"><a href="#">Option1</a></li> 
      <li><a href="#">Option2</a></li> 
      <li><a href="#">Option3</a></li> 
     </ul> 
    </li> 
    <li class="dem" style="display: none;"> 
     <a href="#">Item 1</a> 
    </li> 
    </ul> 
</div> 
</nav> 
<div class="mdiv"> 
    Mobile view 
</div> 

さ欲しいものに近いものを得ますかデスクトップ画面で作業、私は今のところインラインでvisibility: hiddenを隠していた

は、ここで私はそれらを必要としないので、私は、ナビゲーションバーの崩壊のような応答性のスタイルを上書きしている、両方のケース

.nav-items-wrapper { 
    display: flex; 
    justify-content: space-around; 
} 

.nav-ul { 
    display: flex; 
    flex-direction: row; 
} 

@media(max-width:767px) { 
    .nav-items-wrapper ul li a{ 
    font-size: 13px; 
    } 

    .navbar-default { 
    padding-top: 5px; 
    } 

    .nav-ul { 
    width: 40vw; 
    justify-content: center; 
    } 

} 

.dem: hover > .tri { 
    display:block; 
} 

.tri { 
    // display: none; 
    width: 300px; 
    border-radius:2px; 
    position: absolute; 
    background-color: #000; 
    top: 55px; 
    padding: 10px 0; 
    right: 0; 
    left: auto; 
    list-style: none; 
} 

.tri:after { 
    position: absolute; 
    left: 50%; 
    margin-left: 70px; 
    top: -8px; 
    width: 0; 
    height: 0; 
    content:''; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-bottom: 20px solid #000000; 
} 

.tri li { 
    white-space: nowrap; 
    padding: 7.5px 15px; 
} 

.mdiv { 
    width: 100vw !important; 
    max-width: 100vw !important; 
    height: 100vh !important; 
    background-color: #000; 
    right: 0; 
    left: auto; 
    position: absolute; 
} 

.mdiv:after { 
    position: absolute !important; 
    left: 50% !important; 
    margin-left: 25% !important; 
    top: 30vh !important; 
    width: 0 ; 
    height: 0 ; 
    content:''; 
    border-left: 20px solid green; 
    border-right: 20px solid red; 
    border-bottom: 20px solid #000000; 
    pointer-events: none; 
}.navbar-header { 
    padding: 10px 10px; 
} 

私はブートストラップのNAVを使用していますため、対応するスタイルです。それの一部がnavbar下にあったので見て

クラスは、私はフルスクリーンで使用mdivクラスはクラスでdiv要素は、トップから開始したことさdiv

Answer 1

、私はにmargin-topを追加しましたmdivのサイズを調整して、うまく動作しました。ありがとうございます。codePen