如何解决多边形导航栏 HTML/CSS
我有一个导航栏，我正在搞乱样式。我想我想在它的左侧有一个三角形，但是这在理论上似乎更容易。我所做的基本上是设法创建一个三角形，我将它与我的导航栏合并并得到了我想要的结果，但并不完全如此。我希望它只是一个 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 :
<a href="#" class="fa fa-facebook"></a>
<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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。