Jak wyciąć fragment border w figurze

Question

<div class="container">
    <div class="triangle"></div>
</div>

.container {
    margin:120px auto;
    z-index:5;
    width: 1100px;
    height: 1100px;
    position: relative;
    border-top: 4px solid black;
}

.triangle {
    position: absolute;
    margin: auto;
    top: -389px;
    left: 0;
    right: 0;
    width: 777px;
    height: 777px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border-right: 4px solid black;
    border-bottom: 4px solid black;
}

Chcę zrobić coś takiego na tle, które nie jest zwykłym kolorem tylko zdjęciem.

@Dobra, zrobie to sobie w svg

Answer 1

Bordera niestety nie da się wyciąć, ale możesz go zawsze zasłonić divem np: https://codepen.io/anon/pen/opBYOm

Comments

Chcę zrobić coś takiego na tle, które nie jest zwykłym kolorem tylko zdjęciem.

Answer 2

<svg version="1.1" id="trojkat-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1200 600" style="enable-background:new 0 0 1200 600;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:black;stroke-miterlimit:10;}
</style>

<polygon id="XMLID_3_" class="st0" points="0,10 600,595 1200,10"/>
</svg>

 svg{
            margin:0 auto;
            width:1152px;
        }
.st0{fill:none;stroke:black;}
#trojkat-svg{ 
    stroke:black;
    stroke-width:3;
            stroke-dasharray: 500;
            stroke-dashoffset:412;
    }

 

Jak zrobić żeby stroke był symetryczny?