1

Как мне сделать такую рамку у блока с текстом?

alt text

2 ответа 2

3

Изи-бризи:

.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; 
}
3

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>

также можно взять вырезать png уголок и спозиционировать его

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.