html - How to make a snowboard (or squeezed rectangle) shaped div in css? -
i trying shape: far have this. there way effect using css? thought negative radius work.
div { display: inline-block; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; min-width: 200px; border-radius:10% / 70%; background-color: red; }
<div> board </div>
i stuff mess around create things this. here how it. using :before
, :after
can create shape, use them create shape sit on top of div
same colour background. make shape want.
make :before
, :after
big , smaller size want (change width , height).
div { display: inline-block; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; min-width: 200px; border-radius: 20px; background-color: red; position: relative; } div:before, div:after { content: ""; display: block; width: 96%; height: 20px; border-radius: 50%; background: #fff; position: absolute; margin: auto; } div:before { top: -17px; left: 0; right: 0; } div:after { bottom: -17px; left: 0; right: 0; }
<div>board</div>
Comments
Post a Comment