Использование границы изображения в пользовательской форме 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/.

Я надеюсь, что смогу найти решение этой проблемы.

Заранее спасибо.