<div class="block"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit perferendis suscipit, itaque dolorum provident beatae vitae illum, corrupti iure adipisci impedit quia, nisi ipsum, et sed nostrum ut facilis?</p> </div>
body { padding: 20px; background: #f1f1f1; width: 60%; } .block { padding: 30px; position: relative; background: #fff; box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.5); &:before, &:after { display: inline-block; width: 24px; height: 24px; position: absolute; top: 48px; left: 100%; transform: rotate(45deg) translateX(-17px); content: ''; background: #fff; box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.5); } &:after { background: #fff; box-shadow: none; left: auto; top: 0; right: 0; bottom: 0; height: auto; transform: none; } }