Wie Dreiecksform in der oberen rechten Winkel von einem anderen div zu schaffen, indem Grenze geteilt aussehen

Question

Ich möchte:

Ich habe Dreiecksform wie auf diesem Bild, und setze die Ränder so, dass sie im oberen rechten Winkel liegen, aber ich weiß nicht, wie man es vom linken div wie auf dem Bild dargestellt aussehen lässt.

Muss ich links div "schneiden", um seine graue Grenze zu bleiben und vom grünen Dreieck getrennt aussehen?

Gibt es eine Idee, wie man das macht?

EDIT:

1. ich auf Seite fest Navigationsleiste verwenden, so, wenn ich scrollen, wenn div Position ist: absolute, Navigationsleiste geht hinter div.
2. Raum zwischen grünem Dreieck und dem Rest des div sollte transparent sein, weil ich Hintergrund mit am Bild als Seite

Answer 1

Ich würde vorschlagen, die folgende Aufschlag gegeben:

<div id="box"></div> 

der CSS :

#box { 
    width: 10em; 
    height: 6em; 
    border: 4px solid #ccc; 
    background-color: #fff; 
    position: relative; 
} 

#box::before, 
#box::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    border-color: transparent; 
    border-style: solid; 
} 

#box::before { 
    border-width: 1.5em; 
    border-right-color: #ccc; 
    border-top-color: #ccc; 
} 

#box::after { 
    border-radius: 0.4em; 
    border-width: 1.35em; 
    border-right-color: #0c0; 
    border-top-color: #0c0; 
} 

JS Fiddle demo.

Answer 2

Platzieren Sie zwei absolut positionierte Divs innerhalb eines Container-Divs mit relativer Position. Dann machen Sie die Dreiecke mit dem äußeren Dreieck etwas größer als das innere Dreieck. Positionieren Sie diese Elemente dann in der oberen rechten Ecke des Containers.

HTML

<div class="container"> 
    <div class="inner-triangle"></div> 
    <div class="outer-triangle"></div> 
</div> 

CSS

.container{ 
    border: 2px solid gray; 
    position: relative; 
    height: 100px; 
} 

.inner-triangle{ 
    border-left: 20px solid transparent; 
    border-right: 20px solid green; 
    border-bottom: 20px solid transparent; 
    height: 0; 
    width: 0; 
    position: absolute; 
    right: 0px; 
    z-index: 2; 
} 

.outer-triangle{ 
    border-left: 22px solid transparent; 
    border-right: 22px solid gray; 
    border-bottom: 22px solid transparent; 
    height: 0; 
    width: 0; 
    position: absolute; 
    right: 0px; 
    z-index: 1; 
} 

JS Fiddle:http://jsfiddle.net/u8euZ/1

Answer 3

Sie ein Drehen Pseudoelement in Verbindung mit einem overflow:hidden auf der pare verwenden könnte nt.

Von hier aus können Sie den Pseudo mit position:absolute oben rechts positionieren und Sie sollten gut gehen!

div { 
 
    height: 250px; 
 
    width: 300px; 
 
    background: lightgray; 
 
    border-radius: 10px; 
 
    border: 5px solid dimgray; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 30px auto; 
 
} 
 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -60px; 
 
    right: -60px; 
 
    height: 100px; 
 
    width: 100px; 
 
    background: green; 
 
    border: 5px solid dimgray; 
 
    transform: rotate(45deg); 
 
} 
 

 
/***********FOR DEMO ONLY*******************/ 
 

 

 
html, body { 
 
    margin:0; 
 
    padding:0;height:100%; 
 
    vertical-align:top;overflow:hidden; 
 
    background: rgb(79, 79, 79); 
 
    background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1))); 
 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1); 
 
}

<div></div>