*{box-sizing:border-box}div.connect{display:flex;gap:48px}div.connect>div{background:#fff;border:1px solid #000;flex:1;padding:40px;position:relative;transition:all .3s ease}div.connect>div>div{position:relative;z-index:2}div.connect>div:nth-child(odd){border-radius:16px}div.connect>div:before{left:-1px;width:calc(100% + 2px)}div.connect>div:before,div.connect>div:not(:last-child):after{content:"";height:100px;position:absolute;top:calc(50% - 50px);transition:all .3s ease}div.connect>div:not(:last-child):after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='100' preserveAspectRatio='none' viewBox='0 0 70 100'%3E%3Cpath fill='none' d='M0 0v100'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M0 100a35 35 0 0 1 70 0'/%3E%3Cpath fill='none' d='M70 100V0'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M70 0A35 35 0 0 1 0 0'/%3E%3Cpath fill='%23fff' d='M0 0v100a35 35 0 0 1 70 0V0A35 35 0 0 1 0 0'/%3E%3C/svg%3E");background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='100' preserveAspectRatio='none' viewBox='0 0 50 100'%3E%3Cpath fill='none' d='M0 0v100'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M0 100a25 25 0 0 1 50 0'/%3E%3Cpath fill='none' d='M50 100V0'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M50 0A25 25 0 0 1 0 0'/%3E%3Cpath fill='%23fff' d='M0 0v100a25 25 0 0 1 50 0V0A25 25 0 0 1 0 0'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 100%;left:100%;width:50px;z-index:2}div.connect:hover>div:before,div.connect:hover>div:not(:last-child):after{top:calc(55% - 50px)}div.connect:hover>div:nth-child(odd){border-radius:0}div.connect:hover>div:nth-child(2n){border-radius:16px}