創建切角

Question

我需要創建與直，斜截的角而不是圓角的按鈕，例如，這樣的：

取而代之的是：

我不能使用多個box-shadow聲明，因爲我需要1px邊框來勾勒整個形狀。而且我無法使用從0px到0px div的箭頭技巧，因爲同樣的問題。使用-moz-linear-gradient等將不起作用，因爲它只會影響元素的上半部分，而且我需要將角度一直延伸到底部。

border-radius最接近，但默認情況下取整。是否可以通過CSS或JavaScript來實現這種效果？

Answer 1

我結束了對疊加在一個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; 
} 

Answer 2

我見過一些CSS技巧，您可以使用透明邊框和邊框寬度創建各種三角形形狀，這可能是您正在尋找的內容，您可以將其添加到按鈕的末尾。 here另一種方法是創建帶有圖像背景的按鈕。操作圖像會更容易。

編輯：顯然，有一個Triangle Generator，誰知道？

Answer 3

Fiddle

一個大膽使用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 4

我不能居功這個答案，但我發現，有一個解決方案某人。看看這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; 
}