Aetae,
есть, а точнее будут везде новые возможности для реализации подобного с использованием лишь одного HTML элемента:
Использование масок через clip-path и calc(). Хотя сегодня это работает глючно:
Вот только calc() на вертикальную координату почему то не работает. От того никак не сделать блок резиновым в высоту, хотя горизонтальная калькуляция работает норм. Надо этот глюк сообщить в баг-трекер. Но я хз куда им об этом писать.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
background-image: url(http://fc01.deviantart.net/fs31/f/2008/215/f/f/texture_1_by_Texture_Mania.jpg);
background-size: cover;
text-align: center;
}
.mega-button {
display: inline-block;
position: relative;
border: 4px solid #fff;
border-radius: 16px 25px 25px 16px/16px 60px 60px 16px;
-webkit-clip-path: polygon(0 0, 0 100%, -webkit-calc(100% - 10px) 100%, -webkit-calc(100% - 10px) 55%, 100% 50%, -webkit-calc(100% - 10px) 45%, -webkit-calc(100% - 10px) 0);
background-color: #fff;
padding: 0 10px 0 0;
font-size: 18pt;
color: #fff;
text-shadow: 0 0 2px black;
}
.mega-button:before {
background-image: url('http://fc09.deviantart.net/fs71/i/2010/290/a/6/seamless_wet_grass_texture_by_hhh316-d30xrvv.jpg');
background-origin: border-box;
border: inherit;
border-right: 0;
border-radius: inherit;
-webkit-clip-path: inherit;
content: ' ';
display: block;
position: absolute;
margin: -4px;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
</head>
<body>
<div class="mega-button">Потом отаку настолько погрязли<br> в поклейке фигурок гандамов, что оказалось,<br> что действительность за окном<br> для них гораздо более неизведанный предмет,<br> чем космос, в котором Белая База<br> бороздит ватаги Заку,<br> и родился жанр повседневность.</div>
</body>
</html>