Javascript-форум - Вопрос по верстке

Quark_,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <style type="text/css">
    .test {
    border: 10px solid;
    border-color: blue;
    position: relative;
}

.test:before,
.test:after {
    content:"";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #FFFFFF;
    z-index: 100;
}

.test:before {
    top: -22px;
    left: -22px;
}

.test:after {
    top: -22px;
    right: -22px;
}

.test-i {
    padding: 10px;
    position: relative;
}

.test-i:before,
.test-i:after {
    content:"";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #FFFFFF;
}

.test-i:after {
    bottom: -22px;
    right: -22px;
}

.test-i:before {
    bottom: -22px;
    left: -22px;
}


  </style>
</head>

<body>
<div class="test">
    <div class="test-i">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus interdum diam, ut fermentum metus elementum vel. Etiam egestas felis aliquam enim volutpat tempus. Maecenas semper erat at mi hendrerit varius. Fusce id tortor pellentesque velit semper pretium in eget nibh. Nunc fringilla, velit nec tincidunt dapibus, augue urna ullamcorper libero, quis condimentum sem purus id justo. Nunc in nulla sit amet felis sollicitudin ultrices ac a elit. Integer sollicitudin, augue eu dignissim hendrerit, quam elit viverra sapien, quis posuere nulla metus nec nisi. Nam at posuere nibh, non mollis velit. Ut hendrerit sed diam dignissim lobortis. Proin lobortis ornare libero, ut accumsan risus posuere sed.

    </div>
</div>
</body>

</html>

<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .test { border: 10px solid; border-color: blue; position: relative; width: 300px; height: 200px; } #cone { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); top:-38px; left:-59px; position: relative; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-top: 100px solid blue; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } #cone:after{ content:""; position: absolute; top:-89px; left:-64px; width: 0; height: 0; border-left: 64px solid transparent; border-right:64px solid transparent; border-top: 90px solid #FFFFFF; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } </style> </head> <body> <div class="test"><div id="cone"></div></div> </body> </html>