切断角落jquery移动可折叠套

Question

我想在可折叠的设置中切断jquery移动标题的左上角。

这是我的HTML：

<div data-role="content" id="one" class="ui-content" role="main">
    <div data-role="collapsible-set" data-corners="false">
        <div data-role="collapsible" data-collapsed="false" data-theme="f" data-content-theme="f" class="cornered ui-collapsible-heading">
            <h3>Witness</h3>
            <p>Content for witness tab. Content for witness tab. Content for witness tab. Content for witness tab. Content for witness tab. Content for witness tab. </p>
        </div>
        <div data-role="collapsible" data-theme="e" data-content-theme="e">
            <h3>Victim</h3>
            <p>Content for Victim tab. Content for victim tab. Content for Victim tab. Content for victim tab. Content for Victim tab. Content for victim tab. </p>
        </div>
        <div data-role="collapsible" data-theme="d" data-content-theme="d">
            <h3>Information</h3>
            <p>25% of Chinese women have experienced domestic violence.</p>
        </div>
    </div>
</div>

我的CSS：

.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid #30C2DF;
    border-left: 40px solid transparent;
}

添加一个小的自定义CSS之后我可以做一个截断角但是我找不到jquery.mobile.css中的哪个位置进行更改，因为如果我将class = cornered添加到我的div中它只是添加了剪切在标题左侧的角落，并不影响标题本身。

此方法还更改了可折叠集中标题的宽度，并在展开时使内容落后于其他标题（例如，参见照片）。

Answer 1

jQuery Mobile使用.ui-corner-*类添加圆角。您有一个选择是删除doc ready上的类。一个例子是$("[data-role='collapsible-set']").removeClass("ui-corner-all");让我知道这是否有效，或者如果您有任何问题：）

Answer 2

我找到了一个接近我原来的解决方案。

我补充说：

.cornered1 {}

.cornered1 .ui-collapsible-heading
{
    height:0px;
    border-bottom: 40px solid #30C2DF;
    border-left: 40px solid transparent;
}

然后我交替使用border-left的颜色，使标签彼此叠加：

.cornered2 {}

.cornered2 .ui-collapsible-heading
{
    height:0px;
    border-bottom: 40px solid #de1f26;
    border-left: 40px solid #30C2DF;;
} 

结果截图：