Erstellen ein Dreieck div mit einer Grenze

Question

ich in der linken oberen Ecke von meiner Seite

#corner { 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: 0; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000; 
 
    border-bottom: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-left: 50px solid #000; 
 
}

<div id="corner"></div>

EDIT ein Dreieck haben - ich habe es einen 5px roten Rand (nur haben will, auf dem abgewinkelte Seite) so das Dreieck und die Grenze sind verschiedene Farben

Im Idealfall wird es auch ein .png Bild über-top, aber ich ein anderes div über oben setzen kann, wenn nötig

Dies ist eine Ecke Dreieck für die gesamte Seite

Answer 1

ich die beste Art und Weise glauben, was Sie zu erreichen wollen, ist die transform Eigenschaft verwenden anstatt die border zu manipulieren und möglicherweise sogar zwei Elemente und viel unnötigen Code zu benötigen.

Überprüfen Sie diese fiddle oder das folgende Schnipsel für eine visuelle Darstellung.

Snippet:

#corner { 
 
    /* Dimensions */ 
 
    height: 200px; 
 
    width: 200px; 
 
    
 
    /* Positioning */ 
 
    position: absolute; 
 
    left: -7.5em; 
 
    top: -7.5em; 
 
    z-index: 999; 
 
    transform: rotateZ(-45deg); 
 
    
 
    /* Styling */ 
 
    background-color: red; 
 
    border-bottom: 5px solid #0c0c0c; 
 
}

<div id="corner"></div>

Answer 2

zwei divs erstellen:

#corner { 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: 0; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 55px solid #f00; 
 
    border-bottom: 55px solid transparent; 
 
    border-right: 55px solid transparent; 
 
    border-left: 55px solid #f00; 
 
} 
 

 
#corner-inner { 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: -55px; 
 
    top: -55px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000; 
 
    border-bottom: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-left: 50px solid #000; 
 
}

<div id="corner"> 
 
    <div id="corner-inner"></div> 
 
</div>

Answer 3

Sie können sogar Pseudo-Elemente versuchen :before und :after.

#corner { 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000; 
 
    border-bottom: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-left: 50px solid #000; 
 
} 
 
#corner:before{ 
 
    content:""; 
 
    position:absolute; 
 
    border-top: 5px solid red; 
 
    border-left: 5px solid red; 
 
    top:-50px; 
 
    left:-50px; 
 
    width:92px; 
 
    height:92px; 
 
} 
 
#corner:after{ 
 
    content:""; 
 
    position:absolute; 
 
    border-right: 5px solid red; 
 
    top:-104px; 
 
    left:-83px; 
 
    width:93px; 
 
    height:140px; 
 
    transform:rotate(45deg); 
 
}

<div id="corner"></div>