<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-12"> <h1>Hero Title - custom border radius</h1> <pre class="bg-dark text-white-50"> <code> <div class="hero-title"> <div data-radius-corner class="right"></div> <div data-radius-corner class="left"></div> <div data-radius class="right"></div> <div data-radius class="left"></div> <div class="text"> Your Text </div> </div> </code> </pre> </div> <div class="col-6"> <div class="card border-top-0 border-secondary"> <div class="text-white" data-hero-title="secondary" data-hero-color="secondary"></div> <div class="card-body"> <p> What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has? </p> </div> </div> </div> <div class="col-6"> <div class="card border-top-0 border-danger"> <div class="text-white" data-hero-title="danger" data-hero-color="danger"></div> <div class="card-body"> <p> What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has? </p> </div> </div> </div> </div> <div class="row"> <div class="col-8 mt-5"> <div class="card border-top-0 border-success"> <div class="text-white" data-hero-title="success" data-hero-color="success"></div> <div class="card-body"> <p> What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has? </p> </div> </div> <div class="row mt-3"> <div class="col"> <div class="card border-top-0 border-warning"> <div class="text-dark" data-hero-title="warning" data-hero-color="warning"></div> <div class="card-body"> <p> What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has? </p> </div> </div> </div> <div class="col"> <div class="card border-top-0 border-dark"> <div class="text-white" data-hero-title="dark" data-hero-color="dark"></div> <div class="card-body"> <p> What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has? </p> </div> </div> </div> </div> </div> <div class="col-4 mt-5"> <div class="card border-top-0 border-primary"> <div class="text-white" data-hero-title="primary" data-hero-color="primary"></div> <div class="card-body"> <p> What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has? </p> </div> </div> <div class="card border-top-0 mt-3"> <div data-hero-title="default"></div> <div class="card-body"> <p> What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been </p> </div> </div> </div> </div> </div>

:root { --body-background: #fff; } body { padding: 50px; background-color: var(--body-background); font-family: monospace; font-size: 18px; } .hero-title { width: auto; height: 50px; background-color: var(--gray); position: relative; color: inherit; } .hero-title.secondary { background-color: var(--secondary); } .hero-title.primary { background-color: var(--primary); } .hero-title.danger { background-color: var(--danger); } .hero-title.success { background-color: var(--success); } .hero-title.warning { background-color: var(--warning); } .hero-title.dark { background-color: var(--dark); } .hero-title:after, .hero-title:before { content: ""; position: absolute; width: 46px; height: 46px; background-color: var(--body-background); top: 2px; z-index: 2; } .hero-title:before { left: 100%; border-radius: 50% 0 0 113%; margin-left: -29.9px; } .hero-title:after { right: 100%; border-radius: 0 0 113% 50%; margin-right: -29.9px; } .hero-title div[data-radius] { height: 21px; background: inherit; position: absolute; bottom: 100%; width: 33px; z-index: 3; } .hero-title div[data-radius].right { border-radius: 0 39px 0 0; right: 0; margin: 0 29.7px -20.9px 0; } .hero-title div[data-radius].left { border-radius: 39px 0 0 0; left: 0; margin: 0 0 -20.9px 29.7px; } .hero-title div[data-radius-corner] { position: absolute; top: 0; background-color: var(--body-background); width: 51px; height: 20px; } .hero-title div[data-radius-corner].right { left: 100%; margin: 0 0 0 -50px; } .hero-title div[data-radius-corner].left { right: 100%; margin: 0 -50px 0 0; } .hero-title .text { position: absolute; width: 78%; text-align: center; font-size: inherit; top: 0; right: 50%; z-index: 4; transform: translate(50%, 0); border-radius: 21px 21px 0 0; line-height: 53px; max-height: 49px; }

$(document).ready(function() { $('*[data-hero-title]').each(function () { const color = $(this).data('hero-color'); const text = $(this).data('hero-title'); $(this).append(`<div class="hero-title ${color}"><div data-radius-corner class="right"></div> <div data-radius-corner class="left"></div> <div data-radius class="right"></div> <div data-radius class="left"></div> <div class="text"> ${text} </div></div>`); }); })