Come creare forma di triangolo nell'angolo in alto a destra di un altro div a guardare diviso per confine

Question

voglio creare la forma come su questa immagine:

ho creato forma triangolare come su questo pic, e impostare i margini per essere in alto a destra, ma non so come farlo sembrare diviso dal div di sinistra come mostrato in figura.

Devo "tagliare" div sinistra per rimanere è bordo grigio e per cercare divisa dal triangolo verde?

C'è qualche idea di come fare questo?

EDIT:

1. Sto usando barra di navigazione fissa nella pagina, così quando ho scorrere se div è la posizione: assoluta, barra di navigazione va dietro div.
2. spazio tra triangolo verde e resto del div deve essere trasparente, perché io sto usando un'immagine come sfondo della pagina

Answer 1

Io suggerirei, dato il seguente mark-up:

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

il 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

Posizionare due assolutamente posizionato div all'interno di un contenitore div con posizione relativa. Quindi crea i triangoli con il triangolo esterno leggermente più grande del triangolo interno. Quindi posiziona questi elementi nell'angolo in alto a destra del contenitore.

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

È possibile utilizzare un elemento pseudo rotazione in abbinamento a un overflow:hidden sul pare nt.

Da qui è possibile posizionare lo pseudo in alto a destra utilizzando position:absolute e si dovrebbe essere a posto!

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>