你可以创建一个css“功能”或包装

Question

所以有一点的问题，并试图找出最好的方式。

因此得到了在菜单中创建了一个漂亮的组箭头一些CSS代码（由编码器比我好大量举债），大量使用：后：hover和种种。必须写在另一个应用程序，现在想要将其移动到实际页面。

问题是，我需要设置类，而我做的东西真的错了。基本上，我决定使用“arrowrt”类将其设置为顶层菜单。但是最简单的方法是什么，或者它很容易包装它。想要做类似的CSS设置}.arrowrt {负荷。

的代码当前如下所示

<style type="text/css" media="all"> 

    a { 
      text-decoration:none; 
     } 
    ul { 
     margin: 20px 60px; 
    } 
    li { 
     margin-right: 5px; 
    } 
    ul li { 
     display: inline-block; 
     font-size: 12px; 
     height: 30px; 
     line-height: 30px; 
     width: 150px; 
     margin: 5px 8px 0 0; 
     text-align: center; 
     position: relative; 
    } 

    ul li:before { 
     content: " "; 
     height: 0; 
     width: 0; 
     position: absolute; 
     left: -2px; 
     border-style: solid; 
     border-width: 15px 0 15px 15px; 
     border-color: transparent transparent transparent #fff; 
     z-index: 0; 
    } 

    ul li:first-child:before , .dbfsrt { 
     border-color: transparent; 
    } 
    ul li a:after { 
     content: " "; 
     height: 0; 
     width: 0; 
     position: absolute; 
     right: -15px; 
     border-style: solid; 
     color: #000000; 
     border-width: 15px 0 15px 15px; 
     border-color: transparent transparent transparent #ccc; 
     z-index: 10; 
    } 

    ul li.arractive a { 
     background: orange; 
     z-index: 100; 
    } 

    ul li.active a:after { 
     border-left-color: orange; 
    } 

    ul li a { 
     display: block; 
     background: #ccc; 
     color: #000000; 
    } 

    ul li a:hover { 
     background: #000000; 
     color: #ececec; 
    } 

    ul li a:hover:after { 
     border-color: transparent transparent transparent #000000; 

    } 




</style> 

和HTML部分

<ul id="arrowrt"> 
    <li class="arrowrt"><a href="#">Home</a></li> 
    <li class="arrowrt"><a href="#">Back Office</a></li> 
    <li class="arrowrt"><a href="#">Cash Management</a></li> 
    <li class="arrowrt arractive"><a href="#">Overdraft Management</a></li> 
</ul> 

Answer 1

你可以（如果使用SASS）做这样的事情：

.arrowrt li { 
    display: inline-block; 
    font-size: 12px; 
    height: 30px; 
    line-height: 30px; 
    width: 150px; 
    margin: 5px 8px 0 0; 
    text-align: center; 
    position: relative; 
    &:before { 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    left: -2px; 
    border-style: solid; 
    border-width: 15px 0 15px 15px; 
    border-color: transparent transparent transparent #fff; 
    z-index: 0; 
    } 
    &:first-child:before { 
    border-color: transparent; 
    } 
} 

.dbfsrt { 
    border-color: transparent; 
} 

.arrowrt li { 
    a:after { 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    right: -15px; 
    border-style: solid; 
    color: #000000; 
    border-width: 15px 0 15px 15px; 
    border-color: transparent transparent transparent #ccc; 
    z-index: 10; 
    } 
    &.arractive a { 
    background: orange; 
    z-index: 100; 
    } 
    &.active a:after { 
    border-left-color: orange; 
    } 
    a { 
    display: block; 
    background: #ccc; 
    color: #000000; 
    &:hover { 
     background: #000000; 
     color: #ececec; 
     &:after { 
     border-color: transparent transparent transparent #000000; 
     } 
    } 
    } 
} 

但你应该有arrowrt作为一个类不ID，以便它可以重用。

这样做的CSS当量将是：

.arrowrt li { 
    display: inline-block; 
    font-size: 12px; 
    height: 30px; 
    line-height: 30px; 
    width: 150px; 
    margin: 5px 8px 0 0; 
    text-align: center; 
    position: relative; 
} 
.arrowrt li:before { 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    left: -2px; 
    border-style: solid; 
    border-width: 15px 0 15px 15px; 
    border-color: transparent transparent transparent #fff; 
    z-index: 0; 
} 
.arrowrt li:first-child:before { 
    border-color: transparent; 
} 

.dbfsrt { 
    border-color: transparent; 
} 

.arrowrt li a:after { 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    right: -15px; 
    border-style: solid; 
    color: #000000; 
    border-width: 15px 0 15px 15px; 
    border-color: transparent transparent transparent #ccc; 
    z-index: 10; 
} 
.arrowrt li.arractive a { 
    background: orange; 
    z-index: 100; 
} 
.arrowrt li.active a:after { 
    border-left-color: orange; 
} 
.arrowrt li a { 
    display: block; 
    background: #ccc; 
    color: #000000; 
} 
.arrowrt li a:hover { 
    background: #000000; 
    color: #ececec; 
} 
.arrowrt li a:hover:after { 
    border-color: transparent transparent transparent #000000; 
}