剪辑和剪辑路径在IE 11中不起作用

Question

我想在CSS中创建它。

但这就是它在IE11中呈现的方式。

我的代码适用于Chrome，但不适用于IE 11.＆＃34; www.CanIUse.com＆＃34;说剪辑规则适用于IE11。我的CSS出了什么问题？

＆＃13;

＆＃13;

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;
        }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

根本不需要使用剪辑，也不需要使用多个div。

只使用一个，根据需要调整支架体的边框，然后使用好的ol＆＃39;边界三角技术

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="bracket"> </div>

＆＃13;

＆＃13;

＆＃13;