Clip and Clip path not working in IE 11 - css

Question

I am trying to make this in CSS.
But this is how it renders in IE11.
My code below works in Chrome, but not in IE 11. "www.CanIUse.com" says the clip rule works in IE11. What is wrong with my CSS?
body{margin: 50px;}
.bracket-container {
position: relative;
border: 0px solid green;
width: 25px;
height: 58px;
width: 25px;
padding: 0;
margin: 0;
}
#square-clip{
width: 24px;
height: 50px;
background: none;
border: 4px solid red;
border-left: 0;
border-radius: 8px;
clip: (0, 0,0, 25px);
position: absolute;
left:0;
}
#triangle-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 10px solid red;
border-bottom: 8px solid transparent;
position: absolute;
right:-12px;
top: 21px;
}
<h3>Using the new CSS Clip-path</h3>
https://caniuse.com/#search=clip-path</br>
<div class="bracket-container">
<div id="triangle-right"></div>
<div id="square-clip-path"></div>
</div>
<div class="bracket-container">
<div id="triangle-right"></div>
<div id="square-clip"></div>
</div>

Answer 1

No need to use clip at all, nor multiple divs.
Use just one, adjust the borders as needed for the bracket body, then a pseudo element for the triangle with the good ol' borders triangle technique
.bracket{
border: 4px solid red;
width:100px; height:150px;
border-left:none;
border-radius:0 10% 10% 0;
position:relative;
}
.bracket::after{
content:"";
width:20px; height:20px;
position:absolute;
left:100%;
top:50%; transform:translateY(-50%);
box-sizing:border-box;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
border-left:15px solid red;
}
<div class="bracket"> </div>