1.outer {
2 position: relative;
3 height: 75px;
4 width: 300px;
5 text-align: center;
6 line-height: 75px;
7 color: white;
8 text-transform: uppercase;
9}
10.outer:before,
11.outer:after {
12 position: absolute;
13 content: '';
14 top: 0px;
15 height: 100%;
16 width: 55%;
17 background: purple;
18 border: 2px solid white;
19 border-left-width: 3px;
20 z-index: -1;
21}
22.outer:before {
23 left: 0px;
24 border-radius: 20px;
25 border-right: none;
26 transform: skew(20deg);
27 transform-origin: top left;
28 background: seagreen;
29 border-color: red;
30}
31.outer:after {
32 right: 0px;
33 border-top-right-radius: 20px;
34 border-bottom-right-radius: 20px;
35 border-left: none;
36 background: yellowgreen;
37 border-color: maroon;
38}
39
40/* Just for demo of responsive nature */
41
42.outer{
43 transition: all 1s;
44}
45.outer:hover{
46 height: 100px;
47 width: 400px;
48 line-height: 100px;
49}
50body{
51 background: lightblue;
52}