How to create triangle shape in the top-right angle of another div to look divided by border

Question

I want to create shape like on this picture:

I created triangle shape like on this pic, and set the margins to be in top right angle, but I don't know how to make it look divided from the left div like shown on picture.

Do I have to "cut" left div to remain its grey border and to look divided from green triangle?

Is there any idea how to do this?

EDIT:

1. I am using fixed navigation bar on page, so when I scroll if div is position:absolute, navigation bar goes behind div.
2. Space between green triangle and rest of div should be transparent, because I am using image as page background.

Symon

Check it css-tricks.com/snippets/css/css-triangle – Bibliomancy

i know how to create triangle, i created it, but i dont know how to make it look divided from left div(and left div to keep its grey border) – Symon

Answer 1

I'd suggest, given the following mark-up:

#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;
}

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

Vella

I think that explicitly setting z-index (setting the navigation to be higher than that of the div and triangle) should solve the first part of the requirements added to your question; as for the transparency you need (presumably in place of the grey border?) I don't think there is, as yet, any way to solve that problem. I'm afraid, then, that I'm unable to develop this answer to be of further use to you =( – Vella

z-index worked perfectly..thank you! :) For the second problem, i could maybe solve it if i create shape like it's on question pic(left div, not triangle), and then i can create separately triangle div and set margins to minus to be out of left div..but is there any idea how can i create shape like left div? img43.imageshack.us/img43/1319/kkan.png this is the shape that i would like to create if possible. – Symon

how can I make the triangle more deeper? so it goes more diagonally to the bottom left corner – Taffrail

Any way to make the triangle responsive so it occupies the same percent width of the parent as the parent widens? – Hustler

Answer 2

Place two absolutely positioned divs within a container div with position relative. Then make the triangles with the outer triangle being slightly larger than the inner triangle. Then position these elements in the upper right hand corner of the container.

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

Avesta

Answer 3

You could use a rotate pseudo element in conjunction to an overflow:hidden on the parent.

From here you could position the pseudo to the top right using position:absolute and you should be good to go!

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>

Willpower

Answer 4

I think the easiest answer is to just make a square and push it out of the page at an angle. The problem with the border approach is you cant add gradient backgrounds. Which look nice!

<div class="corner"/>

.corner {
  bottom: -100px;
  left: -100px;
  position: absolute;
  height: 200px;
  width: 200px;
  transform: rotate(45deg);
  background: linear-gradient(90deg, hsla(0, 0%, 0%, 1) 0%, hsla(284, 75%, 54%, 1) 100%); // can do special background this way
body {overflow: hidden;}

Feel