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

这是你的答案

如果你想要这样的形状，请使用：before：after

我为你创造了小提琴

这是代码

<强> 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

哦，伙计！去过也做过。

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

或者;尝试定义左，右，上，下的边界半径。

EG。

 border-bottom-left-radius:2em;

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

样式化Jquery UI选项卡导航

2 个答案: