改变三角形的形状 [英] Change the shape of the triangle
问题描述
我正在尝试使活动列表项看起来像这样:
这是我目前拥有的(蓝色三角形是直角三角形,而不是钝的等腰三角形):
这是我的HTML:
< ul class = guideList>
< li> a< a> / a< / li>
< li class = active>法律" span class = activePointer>< / span>< / li>
< li> a财务// a< / li>
< li> a<技术> / a< / li>
< / ul>
这是我的CSS:
.guideList {
font-size:12px;
行高:12px;
font-weight:粗体;
list-style-type:无;
margin-top:10px;
宽度:125像素;
}
.guideList li {
padding:5px 0px 5px 10px;
}
.guideList .active {
background-color:#0390d1;
颜色:白色;
}
.guideList .activePointer {
margin-top:-5px;
底边保证金:-5px;
float:正确;
显示:inline-block;
宽度:0像素;
高度:0像素;
border-top:11像素纯白色;
border-left:11px纯透明;
border-bottom:11px纯白色;
}
),但没有帮帮我。我如何也可以在IE8中使用它?
这是我为IE8尝试的CSS:
-ms-filter: progid:DXImageTransform.Microsoft.Matrix (M11 = 0.9999996192282494,M12 = -0.0008726645152362283,M21 = 0.0008726645152362283,M22 = 0.9999996192282494,SizingMethod ='auto expand');
更改 .guideList .activePointer
改为 7px
而不是11 ...减小的值越多,角度将越宽。
.guideList .activePointer {
margin-top:-5px;
底边保证金:-5px;
float:正确;
显示:inline-block;
宽度:0像素;
高度:0像素;
border-top:11像素纯白色;
border-left:7像素纯色透明;
border-bottom:11px纯白色;
-webkit-transform:旋转(0.05deg); //添加到Chrome中的平滑边缘
}
I am trying to make the active list item look like this:
This is what I currently have (the blue triangle is a right triangle instead of an obtuse isosceles):
Here is my HTML:
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active">Law<span class="activePointer"></span></li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
Here is my CSS:
.guideList{
font-size: 12px;
line-height: 12px;
font-weight: bold;
list-style-type: none;
margin-top: 10px;
width: 125px;
}
.guideList li{
padding: 5px 0px 5px 10px;
}
.guideList .active{
background-color: #0390d1;
color: white;
}
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: right;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-left: 11px solid transparent;
border-bottom: 11px solid white;
}
How do I fix this?
ETA I tried @jlbruno's idea (decreasing the size of the left border), but when I do that the lines of the triangle are not sharp:
ETA Using transform:rotate fixed the edges (thank you @jlbruno!)...but not for IE8. I tried using the microsoft matrix transform filter (related SO question) but it didn't help. How do I get this to work in IE8 also? Here is the CSS I tried for IE8:
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9999996192282494, M12=-0.0008726645152362283, M21=0.0008726645152362283, M22=0.9999996192282494, SizingMethod='auto expand')";
Change the border-left on .guideList .activePointer
to something like 7px
instead of 11... the more you drop that value, the wider the angle will get.
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: right;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-left: 7px solid transparent;
border-bottom: 11px solid white;
-webkit-transform: rotate(0.05deg); // added to smooth edges in Chrome
}
这篇关于改变三角形的形状的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!