页面布局问题

Question

如下图所示，这是美工给的平面图，我们要用HTML来实现，由于本人是搞后台的，前台的这种布局不太懂，我应该怎么实现？用div嘛？还是用table？下面那2个边角怎么实现？
美工只给了一个中间的图片，剩下的边角啥的需要自己布局。求大神给我写个例子！

Answer 1

Answer 2

噗。。。都说后端最怕css布局了 原来是真的吗 哈哈?

Answer 3

边角可以用伪元素画出来.

div {
  position: relative;
}

div:after {
  position: absolute;
  left: -30px;
  top: -10px;
  content: '';
  padding: 15px 30px;
  border-top: 5px solid blue;
  border-left: 5px solid blue;
}

https://jsbin.com/ketarexepo/...