<li> </li>末尾的css三角形

时间：2015-03-25 02:35:19

标签： html css css3 twitter-bootstrap css-shapes

我想实现这样的目标 enter image description here

如何设置此三角形css 

    .triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 21px 42px 21px 0;
border-color: transparent #eeeeee transparent transparent;
line-height: 0px;
_border-color: #000000 #eeeeee #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    }

在标签的末尾加上三角形？ DEMO http://jsfiddle.net/p69qfqsx/

5 个答案:

答案 0 :(得分：5)

列表的新CSS：

ul{
    width: 200px;
    border: 1px solid #ccc;
}

li a{
    background-color: #fff;
    padding: 5px 10px;
    display: block;
    position: relative;
    color: #666;
    text-decoration: none;
}

li a:hover, li.active a{
    background-color: #eee;
}

li a:hover:after, li.active a:after{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff;
  /* background-color: #ddd; */
  content: '';
  position: absolute;
  right: -2px;
  top: 0;
}

https://jsfiddle.net/p69qfqsx/2/

仅为Chrome测试希望它有所帮助。

答案 1 :(得分：1)

这是我修改的代码，但变化不大：

li a:hover:after{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 10px solid #fff;
  /* background-color: #ddd; */
  content: '';
  position: absolute;
  right: -2px;
  top: 1;
}

我只是移除li.active a:after让指针成功。的 DEMO
但我更喜欢使用 @Andre Morales 提出的建议，因为它适用于此。

答案 2 :(得分：0)

这很简单。你可以用很多方法来做，我可以建议一个简单的技巧。在span标记内添加li。看看这个：jsFiddle

HTML 

<li id="LI_3">
    <a href="#Platform" id="A_4">Platform</a>
    <span class="trian"></span>
</li>

CSS 

.trian {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 25px solid #fff;
    position:absolute;
    right:0;
    top:0;
}

答案 3 :(得分：0)

enter image description here 将此添加到您的css，其中.active是current列表

的类 
[id^=UL_] > [id^=LI_].active:before{
    position: absolute;
    top: 0;
    right: -1px; /* -1px to hide the right border */
    content:'';
    z-index: 1;
    border-top: 20px solid transparent; /*20 = li.height /2 */
    border-bottom: 20px solid transparent;
    border-right: 20px solid white
}

样本

＆＃13;
＆＃13; 
#DIV_1 {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    float: left;
    height: 264px;
    min-height: 1px;
    position: relative;
    width: 169px;
    perspective-origin: 84.5px 132px;
    transform-origin: 84.5px 132px;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
    margin: 0px 0px 0px -15px;
    outline: rgb(51, 51, 51) none 0px;
    padding: 0px 15px;
}/*#DIV_1*/

#UL_2 {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    height: 264px;
    width: 139px;
    perspective-origin: 69.5px 132px;
    transform-origin: 69.5px 132px;
    border-top: 0px none rgb(51, 51, 51);
    border-right: 1px solid rgb(238, 238, 238);
    border-bottom: 0px none rgb(51, 51, 51);
    border-left: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
    list-style: none outside none;
    margin: 0px;
    outline: rgb(51, 51, 51) none 0px;
    padding: 0px;
}/*#UL_2*/

#UL_2:after {
    box-sizing: border-box;
    clear: both;
    color: rgb(51, 51, 51);
    display: table;
    width: 1px;
    perspective-origin: 0.5px 0px;
    transform-origin: 0.5px 0px;
    content: ' ';
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
    list-style: none outside none;
    outline: rgb(51, 51, 51) none 0px;
}/*#UL_2:after*/

#UL_2:before {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    display: table;
    width: 1px;
    perspective-origin: 0.5px 0px;
    transform-origin: 0.5px 0px;
    content: ' ';
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
    list-style: none outside none;
    outline: rgb(51, 51, 51) none 0px;
}/*#UL_2:before*/

#LI_3 {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    display: block;
    height: 40px;
    position: relative;
    width: 139px;
    perspective-origin: 69.5px 20px;
    transform-origin: 69.5px 20px;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
    list-style: none outside none;
    margin: 0px -1px -1px 0px;
    outline: rgb(51, 51, 51) none 0px;
}/*#LI_3*/

#A_4 {
    box-sizing: border-box;
    color: rgb(85, 85, 85);
    cursor: default;
    display: block;
    height: 40px;
    position: relative;
    text-align: left;
    text-decoration: none;
    width: 139px;
    perspective-origin: 69.5px 20px;
    transform-origin: 69.5px 20px;
    background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(85, 85, 85);
    font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
    list-style: none outside none;
    outline: rgb(85, 85, 85) none 0px;
    padding: 10px 15px;
}/*#A_4*/

#LI_5, #LI_7, #LI_9, #LI_13 {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    display: block;
    height: 42px;
    position: relative;
    width: 139px;
    perspective-origin: 69.5px 21px;
    transform-origin: 69.5px 21px;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
    list-style: none outside none;
    margin: 0px -1px -1px 0px;
    outline: rgb(51, 51, 51) none 0px;
}/*#LI_5, #LI_7, #LI_9, #LI_13*/

#A_6, #A_8, #A_14 {
    box-sizing: border-box;
    color: rgb(51, 122, 183);
    display: block;
    height: 42px;
    position: relative;
    text-align: left;
    text-decoration: none;
    width: 139px;
    perspective-origin: 69.5px 21px;
    transform-origin: 69.5px 21px;
    border: 1px solid rgba(0, 0, 0, 0);
    font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
    list-style: none outside none;
    outline: rgb(51, 122, 183) none 0px;
    padding: 10px 15px;
}/*#A_6, #A_8, #A_14*/

#A_10 {
    box-sizing: border-box;
    color: rgb(51, 122, 183);
    display: block;
    height: 42px;
    position: relative;
    text-align: left;
    text-decoration: none;
    width: 139px;
    perspective-origin: 69.5px 21px;
    transform-origin: 69.5px 21px;
    border: 1px solid rgba(0, 0, 0, 0);
    font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
    list-style: none outside none;
    outline: rgb(51, 122, 183) none 0px;
    padding: 10px 15px;
}/*#A_10*/

#LI_11 {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    display: block;
    height: 62px;
    position: relative;
    width: 139px;
    perspective-origin: 69.5px 31px;
    transform-origin: 69.5px 31px;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
    list-style: none outside none;
    margin: 0px -1px -1px 0px;
    outline: rgb(51, 51, 51) none 0px;
}/*#LI_11*/

#A_12 {
    box-sizing: border-box;
    color: rgb(51, 122, 183);
    display: block;
    height: 62px;
    position: relative;
    text-align: left;
    text-decoration: none;
    width: 139px;
    perspective-origin: 69.5px 31px;
    transform-origin: 69.5px 31px;
    border: 1px solid rgba(0, 0, 0, 0);
    font: normal normal normal normal 14px/20px 'Open Sans', sans-serif;
    list-style: none outside none;
    outline: rgb(51, 122, 183) none 0px;
    padding: 10px 15px;
}/*#A_12*/

[id=UL_2] > [id=LI_3]:before{
    position: absolute;
    top: 0;
    right: -1px;
    content:'';
    z-index: 1;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid white
}
＆＃13; 
<div id="DIV_1">
	<!-- required for floating -->

	<!-- Nav tabs -->

	<ul id="UL_2">
		<li id="LI_3">
			<a href="#Platform" id="A_4">Platform</a>
		</li>
		<li id="LI_5">
			<a href="#Content" id="A_6">Content</a>
		</li>
		<li id="LI_7">
			<a href="#Marketing" id="A_8">Marketing</a>
		</li>
		<li id="LI_9">
			<a href="#Social" id="A_10">Social</a>
		</li>
		<li id="LI_11">
			<a href="#In-app" id="A_12">In-app Responses</a>
		</li>
		<li id="LI_13">
			<a href="#Systems" id="A_14">Systems</a>
		</li>
	</ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

我认为使用clip-path：

这是一种更简洁的方法 

ul{
    width: 160px;
    border: 1px solid #ccc;
    border-right: none;
    list-style-type: none;
    margin:0;
    padding:0;
}

li a{
    padding: 5px 10px;
    display: block;
    color: #666;
    text-decoration: none;
    border-right:1px solid #ccc;
}

li a:hover, li.active a{
    background-color: #eee;
    clip-path: polygon( 0% 0%,0% 100%,100% 100%,92% 50%,100% 0%);
}
<ul>
  <li class="active">
    <a href="#Platform">Platform</a>
  </li>
  <li>
    <a href="#Content">Content</a>
  </li>
  <li>
    <a href="#Marketing" id="A_8">Marketing</a>
  </li>
  <li>
    <a href="#Social" id="A_10">Social</a>
  </li>
  <li>
    <a href="#In-app" id="A_12">In-app Responses</a>
  </li>
  <li>
    <a href="#Systems" id="A_14">Systems</a>
  </li>
</ul>

相关问题
最新问题