<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="info"> <div class="row"> <div class="card"> <h2>Titel Lorem</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa blanditiis sit, laboriosam at praesentium maxime esse voluptas. Quos aliquid, possimus eum itaque accusamus nihil reprehenderit nesciunt excepturi quas sint.</p> </div> <div class="card"> <h2>Titel Lorem</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam culpa blanditiis sit, laboriosam at praesentium maxime esse voluptas. Quos aliquid, possimus eum itaque accusamus nihil reprehenderit nesciunt excepturi quas sint.</p> </div> </div> <div class="ftr">Design by <a href="http://www.csshint.com/" target="_blank">www.csshint.com</a></div> </section>

@import url("https://fonts.googleapis.com/css?family=Marvel:400,700"); * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Marvel", sans-serif; background-color: yellow; } #info { background-color: yellow; padding: 2rem 0; } .row { width: 100%; max-width: 45rem; margin: 0 auto; padding: 1.5rem; background-color: yellow; } .card { display: inline-block; width: 45%; padding: 4rem 1rem 7rem 1rem; background-color: teal; position: relative; border:0px !important; } .card:after { content: ""; display: block; width: 0px; height: 0px; background-color: skyblue; top: 0px; right: 0px; border-bottom: 20px solid #006767; border-left: 20px solid #006767; border-right: 20px solid yellow; border-top: 20px solid yellow; position: absolute; -webkit-filter: drop-shadow(-5px 5px 3px rgba(0, 0, 0, 0.5)); filter: drop-shadow(-5px 5px 3px rgba(0, 0, 0, 0.5)); } .card:before { content: ""; display: block; width: 0px; height: 0px; border-top: 40px solid #006767; border-right: 40px solid #006767; border-left: 40px solid yellow; border-bottom: 40px solid yellow; bottom: 0px; left: 0px; position: absolute; -webkit-filter: drop-shadow(7px -7px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(7px -7px 5px rgba(0, 0, 0, 0.5)); margin-right: 10%; } .card:nth-of-type(1) { margin-right: 9%; } .card h2 { color: snow; margin-bottom: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; } .card p { color: snow; font-size: 1.1rem; line-height: 140%; } .ftr{ text-align: center; } }