html - Cartouches in CSS -
i'm trying make egyptian cartouche in css, of usual form :
the border isn't terribly hard do,
.cartouche { border: 4px double black; border-radius:20px; display:inline; padding:3px 5px; }
which gives instance
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
Post a Comment