CSS triangle with border

dabblet.css

/**
 * CSS triangle with border
 */

body {
    padding: 10px 30px;
}
div {
    background: white;
    border: 1px solid #666666;
    padding: 10px;
    margin: 10px 0 0;
    width: 200px;
    position: relative;
    text-align: center;
}
div::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: -6px;
    margin-left: -5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    background: white;
    border: inherit;
    width: 10px;
    height: 10px;
}
div::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    background: white;
    width: 20px;
    height: 10px;
    margin-left: -10px;
}

dabblet.html

<div>GrawlCore</div>

settings.json

{"page":"css","view":"split-vertical"}