Jak stworzyć kształt trójkąta w prawym górnym kątem innego div patrzeć podzielony przez granicę

Question

Chcę utworzyć kształt jak na tym zdjęciu:

utworzonego kształt trójkąta jak na to pic, i ustawić marginesy w górnym prawym kącie, ale nie wiem jak sprawić, żeby wyglądał na podzielony z lewego elementu div, jak pokazano na rysunku.

Czy muszę "wyciąć" lewy element div, aby pozostać szarym obramowaniem i wyglądać na podzielony z zielonego trójkąta?

Czy jest jakiś pomysł, jak to zrobić?

EDIT:

1. Używam stałe pasek nawigacji na stronie, więc kiedy przewijać jeśli div jest position: absolute, pasek nawigacyjny idzie za div.
2. przestrzeń pomiędzy zielonym trójkątem i reszty div powinny być przejrzyste, ponieważ używam obraz jako tło strony

Answer 1

sugeruję, biorąc pod uwagę następujące mark-up:

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

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

Umieść dwa absolutnie pozycjonowane elementy div w dziale kontenera ze względną pozycją. Następnie ułóż trójkąty z trójkątem zewnętrznym, który jest nieco większy niż wewnętrzny trójkąt. Następnie umieść te elementy w prawym górnym rogu pojemnika.

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

Można użyć obracania elementu pseudo w powiązaniu do overflow:hidden na pare nt.

Stąd można ustawić pseudo w prawym górnym rogu przy użyciu position:absolute i powinieneś być dobry, aby przejść!

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>