0
在我創建的這個樣機中,我試圖在鼠標懸停在主導航按鈕上的每個按鈕下方創建自定義箭頭形狀。但是,每個按鈕的寬度會有所不同,我需要它看起來一樣。我將如何在CSS中完成此操作? Click Here看看我在「我是新的」鏈接下完成的任務。如何創建寬度不同的自定義形狀
到目前爲止,這是我在style.css中:
.main_nav_inside {
margin: 0 auto;
margin-top: -130px;
position: relative;
z-index: 1;
}
.main_nav_inside ul {
list-style-type: none;
margin: 0;
float: right;
}
.main_nav_inside ul li {
display: inline-block;
float: left;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 500;
text-transform: uppercase;
}
.main_nav_inside ul li a {
display: block;
top: 0;
padding-left: 20px;
padding-right: 20px;
padding-top: 50px;
height: 130px;
color: #ffffff;
}
.main_nav_inside ul li a:hover {
padding-bottom: 5px;
width: 100%;
background-color: #2F2F2F;
}
.main_nav_inside ul li a:hover:before {
padding-bottom: 20px;
width: calc(2% + 30px);
background-color: #000000;
content: '';
position: absolute;
margin: 0 auto;
left: inherit;
margin-left: -20px;
margin-right: 0;
top: 120px;
height: 20px;
background: #000000;
-webkit-transform: skew(0deg, 0deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, 15deg);
z-index: -1;
}
.main_nav_inside ul li a:hover:after {
padding-bottom: 20px;
width: calc(10%/2);
background-color: #000000;
content: '';
position: absolute;
margin: 0 auto;
right: inherit;
margin-left: -35px;
margin-right: 0;
top: 120px;
height: 20px;
background: #000000;
-webkit-transform: skew(0deg, 0deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -15deg);
z-index: -1;
}
下面是這個頁面的HTML以及:
<header id="header_inside">
<div class="main_logo_white"><a href="{{ siteUrl }}"><img src="{{ siteUrl }}/images/ssumc_logo_white.png"></a></div>
{% set parents = craft.entries.section('menu').level(1).limit(5) %}
<nav class="main_nav_inside">
<ul>
{% nav parent in parents %}
<li>
{{ parent.getLink() }}
{% ifchildren %}
<ul class="dropdown">
<li>{% children %}</li>
</ul>
{% endifchildren %}
</li>
{% endnav %}
</ul>
</nav>
</header>
該網站正在使用工藝CMS構建。這不重要。
歡迎來到Stack Overflow。發佈您的HTML以及。 – disinfor
另外,你可以顯示其餘的CSS,包括如何定義.main_nav_inside?謝謝! – TBowman
請閱讀[如何創建最小,完整和可驗證的示例](https://stackoverflow.com/help/mcve) –