html - posicionar - Cómo crear una forma de triángulo en el ángulo superior derecho de otro div para que se vea dividido por el borde

poner un elemento debajo de otro css

Question

Quiero crear una forma como en esta imagen:

Creé una forma de triángulo como en esta foto, y puse los márgenes en el ángulo superior derecho, pero no sé cómo hacer que se vea dividida desde el div izquierdo como se muestra en la imagen.

¿Tengo que "cortar" el div izquierdo para permanecer en el borde gris y para ver dividido del triángulo verde?

¿Hay alguna idea de cómo hacer esto?

EDITAR:

1. Estoy usando la barra de navegación fija en la página, así que cuando me desplazo si div es position: absolute, la barra de navegación va detrás de div.
2. el espacio entre el triángulo verde y el resto del div debe ser transparente, porque estoy usando la imagen como fondo de la página

Answer 1

Coloque dos divs absolutamente posicionados dentro de un contenedor div con posición relativa. Luego, haz los triángulos con el triángulo exterior un poco más grande que el triángulo interior. Luego coloque estos elementos en la esquina superior derecha del contenedor.

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 2

Podría usar un pseudo elemento de rotación junto con un overflow:hidden en el padre.

Desde aquí puede colocar el pseudo en la parte superior derecha usando la position:absolute y debería estar listo para comenzar.

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>

Answer 3

Yo sugeriría, dado el siguiente recargo:

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

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

Demostración de JS Fiddle .