Как сделать эту угловую рамку (как показано на рисунке)?

Question

Я хочу сделать div границ с этим видом угловой области. Именно так, как говорится в изображении, я отмечен красным овалом.

Это то, что я пытался до сих пор:

HTML:

<div class="box"> 
    <header><b>List header</b></header> 
     <ul> 
      <li>List 1</li> 
      <li>List 2</li> 
      <li>List 3</li> 
     </ul> 
</div> 

CSS:

.box{ 
    border:2px solid gray; 
    background: #DC143C; 
    padding:10px; 

} 
.box ul{ 
    list-style-type:square; 
} 

См demo

Answer 1

Вы можете сделать это с чистым css с границами. Создайте контент с :after псевдокласс с css, а затем установите его высоту и ширину на 0. Вы можете изменить ширину вашего треугольника, изменив свойство border-width. Его легче показать, чем говорить. Тут demo Fiddle играть.

HTML

<div></div> 

CSS

div { 
    display: inline-block; 
    height: 110px; 
    width: 500px; 
    background: tomato; 
    margin-left: 150px; 
} 
div:after{ 
    content: ''; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 40px 100px 40px 0; 
    border-color: transparent tomato transparent transparent; 
    position: absolute; 
    left: 60px; 
    top: 20px; 
}