CSS. Уголки на блоке.

[alextrof94]

Возможно ли как то сделать такие уголки (прикрепил) на блоке при помощи чистого CSS?
В данный момент это организуется при помощи 2х изображений.

.box {
	position: relative;
	margin: 30px auto;
	padding: 10px;
	background-color: #fff;
	min-height: 50px;
	min-width: 50px;
}
.box:before {  
    position: absolute;  
    content: url("http://mysite.ru/images/box_before.png");  
    float: right;  
    left: 0;   
    top: 0;  
	display: block;
	width: 50px;
	height: 50px;
}  
.box:after {  
    position: absolute;  
    content: url("http://mysite.ru/images/box_after.png");  
    float: right;  
    bottom: 0;   
    right: 0;  
	display: block;
	width: 50px;
	height: 50px;
}

[TranceSmile]

Наверное проще оставить с картинками.

[Naive]

Запросто.
http://jsfiddle.net/Na1ve/uZSML/1/
текстовый блок для ресайза

[alextrof94]

Сообщение от Naive

Запросто.
http://jsfiddle.net/Na1ve/uZSML/1/
текстовый блок для ресайза

Спасибо. Это помогло.
Про бордеры я не подумал. Хотя с помощью тени пытался подобное сотворить.

[Naive]

тенью тоже можно)

[alextrof94]

Столкнулся с проблемой =/
Ссылки, которые заходят под эти блоки 50х50 не нажимаются (в том месте). Возможно это как-то избежать?
Ну, как нибудь контенту присвоить z-index 1, а бефорам-афтерам z-index 0. Возможно? Если да, то как?

[alextrof94]

Так возможно ли избежать наложения блоков before/after на контент, при этом не добавляя новых блоков (не меняя структуру сайта)?

[Лубышев]

нет нельзя

[Naive]

можно поставить нулевый z-index уголкам и position: relative && z-index: 1 для всех ссылок внутри.