How to add an oblique bar to a button - css

Question

So this is what I did so far :
#mybutton {
background-color: #08c2f3;
width: 200px;
height: 35px;
padding: 6px;
color: white;
font-size: 30px;
font-family: sans-serif;
text-align :center;
border: 1px solid white;
}
body {
background-color: #1599e1
}
#myBar {
width: 100%;
height: 9px;
background: white;
transform: rotateZ(-54deg);
position: relative;
left: 42px;
}
<div id="mybutton">
<span>OK</span>
<div id="myBar"></div>
</div>
but my goal is :

Answer 1

Just add overflow: hidden to the parent container as it will hide your unwanted portion peeping out.
#mybutton {
background-color: #08c2f3;
width: 200px;
height: 35px;
padding: 6px;
color: white;
font-size: 30px;
font-family: sans-serif;
text-align: center;
border: 1px solid white;
overflow: hidden;
}
body {
background-color: #1599e1
}
#myBar {
width: 100%;
height: 9px;
background: white;
transform: rotateZ(-54deg);
position: relative;
left: 42px;
}
<div id="mybutton">
<span>OK</span>
<div id="myBar"></div>
</div>

Answer 2

You don't actually need the "bar" element at all.
This can be achieved with an angled background gradient
#mybutton {
background: linear-gradient(124deg, #08c2f3 70%, white 70%, white 75%, #08c2f3 75%);
width: 200px;
height: 35px;
padding: 6px;
color: white;
font-size: 30px;
font-family: sans-serif;
text-align: center;
border: 1px solid white;
}
body {
background-color: #1599e1
}
<div id="mybutton">
<span>OK</span>
</div>