CSS折叠边缘过渡闪烁，无法在Microsoft Edge上运行

Question

我的右下角有一张带折边css动画的卡片。 动画在白色三角形中显示闪烁的边框，在Microsoft Edge上，它甚至可以在错误的方向上进行动画制作。

如何摆脱Edge上的闪烁和错误旋转？ 有没有更简单的方法来实现这个动画？

Here is a codepen

＆＃13;

＆＃13;

body{
  background: #FFA;
}
.widget-allow-new {
        background: #31682F;
        position: relative;
        border: none;
        position: relative;
        width: 300px;
        height: 100px;
        margin: 1.5em;
        overflow: hidden;
        transition: border-radius 0s;
        transition-delay: .6s;
    }

        .widget-allow-new:hover:before {
            top: 100%;
            left: 100%;
            top: calc(100% - 60px);
            left: calc(100% - 60px);
            border-width: 30px; /*Eckengröße*/
            transition: 0.3s;
          border-color: #FFF rgb(65, 93, 22) rgb(65, 93, 22) #FFF;
        }

        .widget-allow-new:before {
            content: " ";
            position: absolute;
            top: calc(100% - 10px);
            left: calc(100% - 10px);
            box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
            width: 0;
            border: 0px solid transparent;
            transform: rotate(180deg);
            border-color: #FFF rgb(65, 93, 22) rgb(65, 93, 22) #FFF;
            border-width: 5px;
            border-style: solid;
        }

        .widget-allow-new > .addButton {
            width: 35px;
            height: 35px;
            position: absolute;
            top: calc(100% - 35px);
            left: calc(100% - 35px);
            display: none;
        }

            .widget-allow-new > .addButton:before {
                content: "\f067";
                width: 25px;
                height: 25px;
                position: absolute;
                font: normal normal normal 30px/1 FontAwesome;
                top: calc(100% - 30px);
                left: calc(100% - 30px);
            }

        .widget-allow-new:hover > .addButton {
            width: 35px;
            height: 35px;
            position: absolute;
            top: calc(100% - 35px);
            left: calc(100% - 35px);
            display: block;
        }

.addButton:before{
  color: rgb(65, 93, 22);
}

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div class="widget-allow-new">
  <div class="addButton"></div>
</div>

＆＃13;

＆＃13;

＆＃13;