Css Borders with Triangles

Question

How can I create a div like this using html and css?

  ___________________
 <                   |
  |                  |
  |                  |
  ____________________    

Answer 1

You can use a div or any other element as text box. Then by using the :before class, in combination with a transparent border (on 3 sides) you can create an arrow.

More info can be found here

div {
  position: relative;
  background: lightblue;
  width: 200px;
  height: 100px;
}
div:before {
  position: absolute;
  right: 100%;
  top: 10px;
  content: " ";
  height: 0;
  width: 0;
  border: 10px solid lightblue;
  border-color: transparent lightblue transparent transparent;
}

<div>Textbox with arrow</div>

Answer 2

I'll present you the fancy solution:

.box{
    position: relative;
    height: 400px;
    width: 500px;
    background-color: #ccc;
    border: 2px solid orange;
    margin: 50px 0 0 50px;
}

.box::after{
    content: " ";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    left: -12px;
    border-top: 2px solid #FFA500;
    border-left: 2px solid #FFA500;
    z-index: 1000;
    background: linear-gradient(-45deg, rgba(255,255,255,0) 12px, #CCC 12px);
    transform: rotate(-45deg);
}

JSFiddle