0

我有一个导航栏，我在搞乱样式。我想我想在它的左侧有一个三角形，但理论上它似乎更容易。我所做的基本上是设法创建一个三角形，我将它与我的导航栏合并并得到我想要但不完全正确的结果。我希望它只是一个 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