相关疑难解决方法(0)

我需要知道如何在画布上绘制多边形.不使用jQuery或类似的东西.

我需要为这个"形状"添加边框.这有点困难,因为形状是由伪元素之后和之前制作的.我找不到正确的方法.

我需要实现的目标:

我到目前为止的代码:

https://jsfiddle.net/jimmyadaro/xfcjfz3d/

#octagon {
    width: 300px;
    height: 200px;
    background: red;
    position: relative;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: block;
}

#octagon:before,
#octagon:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
}

#octagon:before {
    top: 0;
    border-bottom: 30px solid red;
    border-left: 30px solid #fff;
    border-right: 30px solid #fff;
}

#octagon:after {
    bottom: 0;
    border-top: 30px solid red;
    border-left: 30px solid #fff;
    border-right: 30px solid #fff;
}

<div id="octagon"></div>

我尝试了阴影和轮廓但没有成功.

谢谢阅读.

注意:如果重要的话,我会使用纯色背景色.