L Shaped Div Container

L shaped div container

Like so:

HTML:

<div class="container">
    <div class="mask"></div>
     <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS:

.container
{
    border: 3px solid black;
}

.mask
{
    border-style: solid;
    border-width: 0 0 3px 3px;
    position: relative;
    float: right;
    clear: none;
    right: -3px;
    top: -3px;
    background-color: white;
    width: 50%;
    height: 4em;
}

Demo

Create an L-shaped border using HTML and CSS, is it possible?

Try this: worked for me

div.outer {
    margin: 10px;
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    border-radius: 10px;
}

div.inner {
    width: 160px;
    height: 160px;
    border-right: 1px solid blue;
    border-bottom: 1px solid blue;
    margin-top:-1px;
    margin-left:-1px;
    background:#FFF;
}

Overlap images in an L-shaped container?

If I understand you want to have top div stacked above bottom div, but in the same time you want images inside these two divs to have their own stack order depending of each other?

In this

<div class="container-3">
  <div class="top"><img class="img1" src="http://dummyimage.com/200/ccc/000.png&text=image+1" />
  </div>
  <div class="bottom"><img  src="http://dummyimage.com/200/ccc/000.png&text=image+5" width="202" height="210" class="img2" /></div>
</div>

When you set z-index to divs (parent elements) you cannot set (you can, but it won't work) the z-index to images in those divs and expect that they will be stacked depending of each other.

Fiddle

Is it possible to achieve a folder-shape div container using CSS

Here's a snippet pretty close to your needs. Note, it uses a clip-path: path('...') which is not supported by Opera atm. If Opera needs to be supported, the exact effect might be achieved only using external image. Without it border-radius for pseudo element can produce only a close look. Not sure if it is close enough. Also note, that the path itself is determined by static points coordinates, what might be unwanted. In such a case it might be generated by some JS.

<div class="folder"></div>

.folder{

  width: 420px;
  height: 310px;
  margin: 10em auto 10em;

  border-radius: 5px 25px 25px 25px;
  filter: drop-shadow(0 0 0.75rem grey);

  background: white;
  position: relative;
}

.folder::before{
    content:  '';
    position: absolute;
    top: -18px;
    width: 200px;
    height: 25px;
    background: white;
    border-radius: 25px 0 0 0;
    clip-path: path('M 0 0 L 160 0 C 185 2, 175 16, 200 18 L 0 50 z');
}
.folder::after{
  content: '';
  position: absolute;
  left:  40px;
  width: 85px;
  height: 5px;
  top: -18px;
  background: #7036E9;
  border-radius: 0 0 5px 5px;

}

Angular: L shape border

From Akber Iqbal answer, I figure it out what i want. Here is my result

  <tr>
    <td class="noborderbottom noborderright">1</td>
    <td class='inset-border '>2</td>
    <td rowspan ="2" style="margin-left: 10px">3</td>
    <td rowspan ="2">4</td>
  </tr>
  <tr>
    <td class="nobordertop" colspan="2">abcdefaaa</td>
  </tr>
</table>

table,
th,
td {
  border: 1px solid black;
  padding: 20px;
  border-spacing: 0;
}

.nobordertop {
  border-top: none;
}

.noborderbottom {
  border-bottom: none;
}

.noborderright {
  border-right: none;
}

.inset-border {
  border: 1px solid red;
  box-shadow: -1px 1px red inset;
  box-shadow: -1px 1px black
}

L shaped text box on a website

Try CSS Exclusions.

CSS Exclusions define arbitrary areas around which inline content
can flow. CSS Exclusions can be defined on any CSS
block-level elements. CSS Exclusions extend the notion of content
wrapping previously limited to floats.

They are specifically related to word-wrap.

---

Related Topics