html - How can I create div with a pointed top with CSS -
i've see lot of threads remotely related suggest css triangles in ::after or ::before pseudos, none have panned out. i'm throwing out see if has ideas.
i'm looking create div pointed or pitched top still maintains uniform border , box-shadow rest of div.
see link image of i'm trying create:
if dont want use image this. working image lot easier in case.
body { background-color: #ccc; } .wrapper { } .outer { width: 0; height: 0; border-style: solid; border-width: 0 205px 32px 205px; border-color: transparent transparent #ffffff transparent; position: absolute; } .inner { width: 0; height: 0; border-style: solid; border-width: 0 200px 32px 200px; border-color: transparent transparent #ea2225 transparent; margin-left: -200px; margin-top: 5px; position: absolute; } .fix { background-color: #fff; height: 10px; width: 410px; position: absolute; margin-top: 32px; } .red { width: 396px; height: 300px; background-color: #ea2225; margin-top: 37px; position: absolute; border-left: 7px solid #fff; border-right: 7px solid #fff; border-bottom: 6px solid #fff; -webkit-box-shadow: 3px 5px 5px 0px rgba(48,48,48,1); -moz-box-shadow: 3px 5px 5px 0px rgba(48,48,48,1); box-shadow: 3px 5px 5px 0px rgba(48,48,48,1); }
<div class="wrapper"> <div class="fix"></div> <div class="outer"> <div class="inner"> </div> </div> </div> <div class="red"></div>
Comments
Post a Comment