CSS - 如何为css形状添加边框颜色

Question

我需要为css形状添加边框颜色,但我不知道该怎么做.我已经与尝试border和border-width,但不起作用.

这是我的代码:

.shape
    {
      width: 400px;
      height: 40px;
      background-color: green;
      -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
      clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    }

<div class="shape"></div>

谢谢

Answer 1

伪元素

一个很好的方法是使用像a这样的伪元素 :before

制作完全相同的形状,但稍微小一点,保持你想要的主色,并正确定位,你得到你想要的边框.

.shape {
  width: 400px;
  height: 40px;
  background-color: black;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  position: relative;
}

.shape:before {
  content: '';
  width: 398px;
  height: 38px;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  background: green;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
}
  

<div class="shape"></div>