javascript - 创建斜角

Question

我需要创建一个带有直角而不是圆角的按钮，例如，这个：

而不是这个：

我不能使用多个box-shadow声明，因为我需要一个 1px 的边框来勾勒整个形状。由于同样的问题，我不能使用 0px x 0px div 中的箭头技巧。使用-moz-linear-gradientetc. 将不起作用，因为它只会影响元素的上半部分，我需要角度一直持续到底部。

border-radius最接近，但默认情况下是四舍五入的。是否可以通过 CSS 或 JavaScript 来实现这种效果？

Answer 1

我已经看到了一些 CSS 技巧，您可以使用透明边框和边框宽度来创建各种三角形，这可能是您正在寻找的，您可以将它添加到按钮的末端。 这里 另一种方法是创建带有图像背景的按钮。处理图像会容易得多。

编辑：显然，有一个三角形发生器，谁知道？

Answer 2

小提琴

大胆使用 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 */
}

Answer 3

我不能把这个答案归功于这个答案，但我发现有人对此有解决方案。看看这个小提琴。

它会像这样工作：

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;
}

Answer 4

我最终在覆盖菜单的 div 上使用了背景图像，并在选择最后一个选项卡时使用 JavaScript 更改了最后一个选项卡和 div 的类。

我本来希望纯粹通过 CSS 来做到这一点，并且使用 :before 和 :after 被偏移的伪元素非常接近，但是要在所有浏览器中获得像素完美的布局太困难了。

这是我的好奇代码。

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;
}