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

我试图在CSS中做到这一点。



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


我的以下代码在Chrome中有效，但在IE 11中无效。“ www.CanIUse.com”表示剪辑规则在IE11中有效。我的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>

最佳答案

完全不需要使用clip，也不需要多个div。

仅使用一个，根据需要调整支架主体的边界，然后使用良好的ol'borders三角技术对三角形创建一个伪元素

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

关于css - 剪辑和剪辑路径在IE 11中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48452903/