html - Cartouches in CSS -


i'm trying make egyptian cartouche in css, of usual form :

enter image description here

the border isn't terribly hard do,

.cartouche {     border: 4px double black;     border-radius:20px;     display:inline;     padding:3px 5px; } 

which gives instance

enter image description here

it lacking bar of cartouche, though. way add such bar edge of border?

if mean vertical bar @ right side, use pseudo element , following settings:

.cartouche {    width: 160px;    height: 80px;    border: 4px double black;    border-radius: 30px;    display: inline-block;    padding: 3px 5px;    position: relative;  }    .cartouche:after {    content: '';    position: absolute;    right: -8px;    width: 0;    top: -4px;    height: calc(100% + 8px);    border-right: 4px double black;  }
<div class="cartouche"></div>

or, variation bar covers rounded border , has closed border line itself:

.cartouche {    width: 160px;    height: 80px;    border: 4px double black;    border-radius: 50px;    display: inline-block;    padding: 3px 5px;    position: relative;  }    .cartouche:after {    content: '';    position: absolute;    right: -4px;    width: 2px;    top: -4px;    height: calc(100% + 8px);    border: 1px solid black;    background: white;  }
<div class="cartouche"></div>


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -