How do I make such a frame in the block with the text?

alt text

    2 answers 2

    Easy breezy:

    .mess{ background: #000; width: 100px; border: 1px solid #fff; border-radius: 5px; color: #fff; } .mess::after{ position: absolute; top: -20px; left: 90px; content: ''; border: 10px solid transparent; border-bottom: 10px solid #000; }

      http://jsfiddle.net/5m84nypt/

       body{ background: #647D8B; font-family: sans-serif; } .block { background: #222; border-radius: 2px; padding: 20px; position: relative; color: #fff; border: 2px solid #fff; } .block:after, .block:before { content: ''; position: absolute; left: 20px; bottom: -9px; background: #222; width: 20px; height: 20px; box-shadow: 2px 2px #fff; z-index: -1; /* Прячем за основным блоком */ transform: rotate(45deg); /* Поворачиваем на 45º */ -webkit-transform: rotate(45deg); } .block:before { z-index: 1; box-shadow: none; } 
       <div class="block"> Как мне сделать такую рамку у блока с текстом? Как мне сделать такую рамку у блока с текстом? Как мне сделать такую рамку у блока с текстом? Как мне сделать такую рамку у блока с текстом? </div>

      You can also take a cut png corner and position it