Показать сообщение отдельно
  #180 (permalink)  
Старый 18.09.2019, 06:16
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

Наконец-то получилось то что хотела, блок с серым фоном, и сделала даже лучше чем ожидала - блок с зелёным фоном

<!DOCTYPE html>
<html lang="ru">
<head>
<style>
.box {
width: 150px;
height: 50px;
display: inline-block;
background: #999;
border: 1px solid #999;
border-radius: 8px/5px; 
-webkit-clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
}
.block {
width: 148px;
height: 48px;
background: #e1e1e1;
border: 1px solid transparent;
border-radius: 7px/4px; 
position: absolute;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 48px, 0 33px);
clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 48px, 0 33px);
text-align: center;
padding-top: 10px; }

.box_01 {
width: 150px;
height: 50px;
display: inline-block;
background: #008000;
border: 1px solid #008000;
border-radius: 8px/5px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
}
.block_01 {
width: 148px;
height: 48px;
background: #cfc;
border: 1px solid transparent;
border-radius: 7px/4px; 
position: absolute;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 43px, 0 33px);
clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 43px, 0 33px);
text-align: center;
padding-top: 10px; }
</style>
</head>
<body>
<div class="box">
<div class="block">
<a>0001</a>
</div>
</div>
<div class="box_01">
<div class="block_01">
<a>0002</a>
</div>
</div>
</body>
</html>
Ответить с цитированием