css - 样式化 Jquery UI 选项卡导航

Question

有谁知道如何在 CSS 中做到这一点？

Navigation tab image

这是用于 jQuery UI 选项卡的导航选项卡。我无法让 border-radius 工作。目前，我可以做这个形状，但左上角和右上角没有半径。

    border-right: 47px solid transparent;   
    border-bottom: 35px solid #415049;
    border-left: 15px solid transparent;    
    -webkit-border-radius: 5px 5px 0 0px;
    -moz-border-radius: 5px 5px 0 0px;
    border-radius: 5px 5px 0 0px;   
    height: 0;  
    background:none;

如有任何帮助，我们将不胜感激。

Answer 1

这是你的答案

如果你想要这样的形状使用 :before :after

我已经为你创建了 fiddle

这是代码

HTML

<div><span></span></div>

CSS

div > span {
    background-color: #333333;
    border-radius: 6px;
    display: inline-block;
    height: 50px;
    width: 200px;
}

div {
    display: inline-block;
    height: 43px;
    overflow: hidden;
    padding: 0 106px 0 46px;
    position: relative;
    width:
}
div:after {
    background-color: #333333;
    border-radius: 10px;
    content: " ";
    height: 100px;
    position: absolute;
    right: 44px;
    top: 15px;
    transform: rotate(30deg);
    width: 100px;
}
div:before {
    background-color: #333333;
    border-radius: 8px;
    content: " ";
    height: 50px;
    left: 39px;
    position: absolute;
    top: 6px;
    transform: rotate(15deg);
    width: 50px;
}

这是给你的 fiddle http://jsfiddle.net/96sv3/2/

希望这对你有帮助:)