样式jQuery UI选项卡导航

Question

有人知道如何在CSS中执行此操作？

导航选项卡图像

这是针对JQuery UI选项卡的"导航"选项卡。我无法让边界拉迪乌斯上班。目前，我可以做这个形状，但左上角没有半径。

    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

这是您的答案

如果您想要这样的形状：之前：

之后

我为您创建了小提琴

这是代码

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

这是您的小提琴http://jsfiddle.net/96Sv3/2/

希望这对您有帮助：）

Answer 2

哦，伙计！去过也做过。

您可以将背景图像用于选项卡和选项卡状态。

or;尝试定义左，右，顶部，底部的边框半径。

例如

 border-bottom-left-radius:2em;

http://www.w3schools.com/cssref/tryit.asp?filename = trycss3_border-bottom-lottom-left-radius