L shaped div container

Question

I am trying to draw following "L" shaped div using CSS.

How can I draw this shape so contained text flows in this L shaped container?

Answer 1

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

Answer 2

Here is another version which caters for transparent and non-solid backgrounds also. In essence this is an enhancement on the currently accepted answer.

In this method the shape is created as follows:

• A container with bottom and left borders alone as those are the only two borders that cover the entire height/width of the container.
• Background added through linear-gradients for half the width and half the height of the container. The backgrounds have size equal to the width the border and are positioned as required on top left and bottom right.
• A pseudo element added, floated to the right and positioned as required to make it look as though the shape resembles a "L". The pseudo-element has borders on its left and bottom.

.container {
  box-sizing: border-box;
  position: relative;
  margin: 10px;
  border-left: 3px solid;
  border-bottom: 3px solid;
  height: 250px;
  /*height: auto;*/
  width: 400px;
  line-height: 20px;
  background: -webkit-linear-gradient(0deg, black 50%, transparent 50%), -webkit-linear-gradient(90deg, black 50%, transparent 50%);
  background: -moz-linear-gradient(90deg, black 50%, transparent 50%), -moz-linear-gradient(0deg, black 50%, transparent 50%);
  background: linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, transparent 50%);
  background-size: 100% 3px, 3px 100%;
  /*background-size: 100% 3px, 3px 122%;*/
  background-position: 0px 0px, 100% 100%;
  background-repeat: no-repeat;
}
.container:before {
  position: relative;
  float: right;
  right: 0px;
  top: 0px;
  content: '';
  background: transparent;
  height: 50%;
  /*height: 80px;*/
  width: 50%;
  border-left: 3px solid;
  border-bottom: 3px solid;
}
p {
  display: block;
  padding: 8px 8px;
}

/* Just for demo */

body {
  background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
  background: -moz-linear-gradient(90deg, crimson, indianred, purple);
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<div class="container">
  <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>

---

Points to note:

1. This method would work only if the container is also transparent. If the container needs to have a different image or gradient as background then this method would also not work. For such cases, you can use clip-path (can be employed using SVG or CSS). The support however is very minimal. SVG Sample | CSS Sample
2. The box in example is a fixed size one. If you want the box to overflow as the content increases but still maintain a shape like in question then use the commented version for height on both parent and pseudo element. For gradients to look like perfect borders, the size would need to be modified dynamically as parent's height increases.

Answer 3

You can use Use Google web designer tool for creating complex shapes using HTML5-canvas and CSS.

As the file contains much code, providing a fiddle of the demo created using Google Web Designer tool

DEMO