0

私はナビゲーションバーを持っていて、スタイリングをいじっています.左側に三角形を作りたいと思っていましたが、理論的にはずっと簡単に思えました. 私が本質的にしたことは、ナビゲーションバーとマージして、正確ではないが望んでいた結果を得た三角形を作成することでした。1 つの div にしたいので、後で遊んで全幅 (ロゴの幅を差し引いたもの) にすることができます。これが私のデザインとコードのイメージです (言語は気にしないでください)。

ナビゲーションバーの画像

HTML

<body>
  <div class="header"> 
    <div class="logo">
      logo
    </div>
    <div class = "header-right-side">
      <div class = "social-div">
        <div class = "social">
          Ακολουθήστε μας στα social media :  
          &nbsp;<a href="#" class="fa fa-facebook"></a>
&nbsp;<a href="#" class="fa fa-instagram"></a>
        </div>
      </div>
      <div class = "menu">
          <div class="triangle">
          </div>
        <ul class="nav">
          <li><a href=""></a>Αρχική</li>
          <li><a href=""></a>Ιστορία</li>
          <li><a href=""></a>Ρόστερ</li>
          <li><a href=""></a>Πρόγραμμα</li>
          <li><a href=""></a>Επικοινωνία</li>
        </ul>
      </div>
    </div>
  </div>

CSS

.{
  box-sizing: border-box;
}

body{
    font-family: 'Advent Pro', sans-serif;
}

.header{
  position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.logo {
  width: 25%;
  height: 125px;
  float: left;
  background-color: red;
  text-align: center;
  vertical-align: middle;
  line-height: 125px;
}

.header-right-side {
  background-color:yellow;
  height: 125px;
}

.social-div{
  background-color: blue;
  height: 45px;
}

.social{
  float: right;
  background-color: lightblue;
  padding: 12.8px;
}

.fa {
  text-align: center;
  text-decoration: none;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  color: white;
}


.triangle{
  border-bottom: 50px solid white;
  border-left: 50px solid transparent;
  float:left;
}

.menu{
  background-color:blue;
}

.nav{
  background-color: white;
  display: flex;
  justify-content: space-around;
  width:60%;
  height:50px;
  margin:1px;
  line-height: 45px;
  border:none;
}

.nav li{
  display: block;
  list-style:none;
  text-align: center;
}
4

0 に答える 0