CSS-剪辑路径边框不起作用

Question

我正在尝试使用CSS clip-path创建一个形状。 jsfiddle 是here。

我的代码是：

CSS：

.kite {
    width: 280px;
    height: 280px;
    background: #1e90ff;
    border: 4px solid # 222; - webkit - clip - path: polygon(0 0, 52 % 0, 100 % 100 % , 0 52 % );
    clip - path: polygon(0 0, 52 % 0, 100 % 100 % , 0 52 % );
}
.kite: hover {
    opacity: 0.6;
}

/* Center the demo */
html,
body {
    height: 100 % ;
}
body {
    display: flex;
    justify - content: center;
    align - items: center;
}

HTML：

<div class="kite"></div>

此形状需要具有黑色边框，但CSS当前不会为整个形状创建边框，而只会为div创建边框。