我需要创建与直,斜截的角而不是圆角的按钮,例如,这样的:创建切角
取而代之的是:
我不能使用多个box-shadow
声明,因为我需要1px边框来勾勒整个形状。而且我无法使用从0px到0px div的箭头技巧,因为同样的问题。使用-moz-linear-gradient
等将不起作用,因为它只会影响元素的上半部分,而且我需要将角度一直延伸到底部。
border-radius
最接近,但默认情况下取整。是否可以通过CSS或JavaScript来实现这种效果?
我需要创建与直,斜截的角而不是圆角的按钮,例如,这样的:创建切角
取而代之的是:
我不能使用多个box-shadow
声明,因为我需要1px边框来勾勒整个形状。而且我无法使用从0px到0px div的箭头技巧,因为同样的问题。使用-moz-linear-gradient
等将不起作用,因为它只会影响元素的上半部分,而且我需要将角度一直延伸到底部。
border-radius
最接近,但默认情况下取整。是否可以通过CSS或JavaScript来实现这种效果?
我结束了对叠加在一个div使用背景图片菜单,并在最后一个选项卡是sel时使用JavaScript更改了最后一个选项卡和div的类ected。
我希望纯粹通过CSS来做到这一点,并且使用:before和之后:偏移的伪元素非常接近,但要在所有浏览器中获得像素完美的布局非常困难。
这是我的好奇的代码。
的Javascript:
if($('.tabs .tab-right').hasClass('selected')){
$(".tab .angle").addClass('angle-selected');
}else{
$(".tab .angle").removeClass('angle-selected');
}
CSS:
.tabs .tab-right {
padding: 8px 28px 8px 12px;
}
.tabs .angle {
background: url("../img/angle-noborder.png") no-repeat transparent;
height: 35px;
width: 28px;
display: inline-block;
position: relative;
right: 28px;
}
.tabs .angle.angle-selected {
background: url("../img/angle-border.png") no-repeat transparent;
}
我见过一些CSS技巧,您可以使用透明边框和边框宽度创建各种三角形形状,这可能是您正在寻找的内容,您可以将其添加到按钮的末尾。 here另一种方法是创建带有图像背景的按钮。操作图像会更容易。
编辑:显然,有一个Triangle Generator,谁知道?
这只能使固体形状,而不是轮廓。 –
您可以使用2个伪元素和一个偏移量进行轮廓。 – elclanrs
我的问题是,按钮,当他们是坚实的,实际上使用渐变背景。我还没找到添加渐变到三角形边框的方法。 – user1997781
一个大胆使用CSS3伪元素
CSS代码:
div {
width: 118px; /* 118 = rectangle width - 2 */
height: 33px; /* 33 = shape height - 2 */
border: 1px solid #007bff;
background-color: white;
}
div:before {
content: '';
border-right: 30px solid transparent; /* 30 = triangle width */
border-bottom: 35px solid #007bff; /* 35 = shape height */
float: left;
margin-left: 119px; /* 121 = rectangle width - 1 */
margin-top: -1px; /* always 1*/
}
div:after {
content: '';
border-right: 29px solid transparent; /* 29 = triangle width - 1 */
border-bottom: 33px solid white; /* 33 = shape height - 2 */
float: left;
margin-left: 118px; /* 120 = rectangle width - 2 */
margin-top: -34px; /* 34 = shape height - 1 */
}
我不能居功这个答案,但我发现,有一个解决方案某人。看看这fiddle。
它的工作是这样的:
HTML:
<div id="box3">
Content Here
<div id="box3bottom"></div>
</div>
CSS:
p {
margin: 10px;
}
#box1, #box2, #box3 {
background-color: #207cca;
border: 1px solid black;
color: white;
height: 200px;
margin: 20px auto;
position: relative;
text-align: center;
width: 300px;
}
#box1:before, #box2:before, #box3:before {
background-color: white;
border-bottom: 1px solid black;
content: "";
height: 20px;
left: -12px;
position: absolute;
top: -8px;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 30px;
}
#box2:after, #box3:after {
background-color: white;
border-bottom: 1px solid black;
content: "";
height: 20px;
position: absolute;
right: -12px;
top: -8px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 30px;
}
#box3bottom {
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
#box3bottom:before {
background-color: white;
border-top: 1px solid black;
bottom: -8px;
content: "";
height: 20px;
left: -12px;
position: absolute;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 30px;
}
#box3bottom:after {
background-color: white;
border-top: 1px solid black;
bottom: -8px;
content: "";
height: 20px;
position: absolute;
right: -12px;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 30px;
}
这在FF,Chrome和IE 10中运行得非常好,但不能在IE 9或8中运行,否则会非常完美。有任何想法吗? – user1997781
它应该在IE 9中工作......如果没有,我很惊讶。另一方面,IE8或更低版本不支持:在伪选择器之后,这是一个问题。有几个java脚本聚合填充,我见过可以帮助解决这个问题。以下是一个:https://code.google.com/p/ie7-js/ –
的未普遍支持'边境image'可能是你最好的选择。我有一个模糊的回忆,看到有关“CSS形状”提案的内容。 (*编辑* - 良好的CSS形状似乎是不相关的;没关系。) – Pointy
我会使用背景图片 – TGH
@TGH是的,这将是最简单的事情(以及2009年会做什么:)也可以用CSS翻译/旋转做一些有趣的事情。 – Pointy