1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Document</title>6 <style>7 *{margin:0;padding:0;}8 . Arrow_box{9 position:relative;Ten background:#88b7d5; One Border:4px Solid #c2e1f5; A } - . Arrow_box{ - padding:40px; the width:280px; - Height:100px; - Border-radius:6px; - margin:50px Auto; + } - + . Arrow_box:before,.arrow_box:after{ A position:Absolute; at Bottom:100%*/* The arrows position at the top top:100%, the arrow position at the bottom */ - Left:50%; - Border:Solid Transparent; - content: " "; - Height:0; - width:0; in pointer-events:None; - } to . Arrow_box:before{ + Border-color:Rgba (194, 225, 245, 0); - Border-bottom-color:#c2e1f5;/* arrow pointing up; to Border-top-color with arrows: #c2e1f5; the Border-width:36px; * Margin-left:-36px; $ }Panax Notoginseng . Arrow_box:after{ - Border-color:Rgba (136, 183, 213, 0); the Border-bottom-color:#88b7d5;
/* arrow pointing upwards; Border-top-color: #c2e1f5; * *
+ Border-width:30px; A Margin-left:-30px; the } + </style> - </Head> $ <Body> $ <Divclass= "Arrow_box"> - <H1class= "logo">CSS Arrow please!</H1> - </Div> the </Body> - </HTML>
Bubble Box Arrow Make