html - cut off corners jquery mobile collapsible sets -

i cut off top-left corner of jquery mobile header in collapsible set.

here 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 witness tab. content witness tab. content witness tab. content witness tab. content witness tab. content witness tab. </p>         </div>         <div data-role="collapsible" data-theme="e" data-content-theme="e">             <h3>victim</h3>             <p>content victim tab. content victim tab. content victim tab. content victim tab. content victim tab. content 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> 

and css:

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

after adding little custom css can make cut off corner can't find in jquery.mobile.css make change, because if add class=cornered div adds cut off corner on left side of header , doesn't effect header itself.

this approach changed width of header in collapsible set, , made content drop behind other headers when expanded (see photo example).

jquery mobile uses .ui-corner-* classes add rounded corners. 1 option have remove class on doc ready. example $("[data-role='collapsible-set']").removeclass("ui-corner-all"); let me know if works, or if have questions :)