css - 在自定义 css 形状上使用图像边框（三角形底部）

Question

我正在建立一个 wordpress 网站，但在尝试复制带有边框来源和图像的外观形状时遇到问题。我能够将边框添加到“方形”主要形状，但找不到将其添加到“三角形”部分的方法。

这是我到目前为止的代码。

#heromessage {
    padding: 40px !important;
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    float: none;
    z-index: auto;
    width: auto;
    height: auto;
    position: relative;
    content: ;
    cursor: default;
    opacity: 1;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    outline: none;
    border: 10px solid rgba(0,0,0,1);
 -webkit-border-image: url("http://662.d1e.myftpupload.com/wp-content/uploads/2017/03/PFW_GoldenBG.jpg") 30 round; /* Safari 3.1-5 */
    -o-border-image: url("http://662.d1e.myftpupload.com/wp-content/uploads/2017/03/PFW_GoldenBG.jpg") 30 round; /* Opera 11-12.1 */
    border-image: url("http://662.d1e.myftpupload.com/wp-content/uploads/2017/03/PFW_GoldenBG.jpg") 30 round;
    border-radius: 0;
    font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
    color: rgba(0,0,0,1);
    text-decoration: none;
    text-align: center;
    text-transform: none;
    text-indent: 0;
    -o-text-overflow: clip;
    text-overflow: clip;
    letter-spacing: 0;
    white-space: normal;
    word-spacing: 0;
    word-wrap: ;
    background: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
    transform: scaleX(1) scaleY(1.) scaleZ(2);
    -webkit-transform-origin: 50% 50% 0;
    /* transform-origin: 50% 50% 0; */
}

#heromessage:before {
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    float: none;
    z-index: auto;
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    cursor: default;
    opacity: 1;
    top: -40px;
    right: auto;
    bottom: auto;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    outline: none;
    /* border: 75px solid rgba(0,0,0,0); */
    border-top: 0 solid rgba(0,0,0,1);
    border-bottom: 40px solid #fff;
    -webkit-border-radius: 0;
    border-radius: 0;
    font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
    color: rgba(0,0,0,1);
    text-decoration: none;
    text-align: left;
    text-transform: none;
    text-indent: 0;
    -o-text-overflow: clip;
    text-overflow: clip;
    letter-spacing: 0;
    white-space: normal;
    word-spacing: 0;
    word-wrap: ;
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
    transform: scaleX(1) scaleY(1) scaleZ(1);
    -webkit-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
}

#heromessage:after {
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    float: none;
    z-index: auto;
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    cursor: default;
    opacity: 1;
    top: auto;
    right: auto;
    bottom: -40px;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    outline: none;
    border: 240px solid rgba(0,0,0,0);
    border-top: 40px solid #fff;
    border-bottom: 0 solid rgba(0,0,0,1);
    -webkit-border-radius: 0;
    border-radius: 0;
    font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
    color: rgba(0,0,0,1);
    text-decoration: none;
    text-align: left;
    text-transform: none;
    text-indent: 0;
    -o-text-overflow: clip;
    text-overflow: clip;
    letter-spacing: 0;
    white-space: normal;
    word-spacing: 0;
    word-wrap: ;
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
    transform: scaleX(1) scaleY(1) scaleZ(1);
    -webkit-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
}

您可以在此处查看开发站点：http: //662.d1e.myftpupload.com/。

我希望我能找到解决这个问题的方法。

提前致谢。