Как мне сделать такую рамку у блока с текстом?
2 ответа
Изи-бризи:
.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;
}
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 уголок и спозиционировать его