Make box with arrow down - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Arrow

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Arrow

Description

Make box with arrow down

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>2cols:display:flex</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>

body {<!-- w  w w . j a v a  2s.com-->
   background:#333;
}
.doublecol {
   display:flex;
}
.singleArrow{
   margin:0 auto;
   width:0;
   border-top:25px solid red;;
   border-right:25px solid white;
   border-left:25px solid white;
   background:gray;
   margin:20px auto;
}
.leftCol,
.rightCol{
   background:white;
   width:300px;
   margin:20px 40px;
}
.sectionBlock {
   box-sizing: border-box;
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
   background-color: rgb(246,246,246);
   margin-top: 20px;
   padding: 4px 0 0 10px;
   padding-bottom:20px;
}
.sectionBlockContent{
   padding: 30px 20px 10px 30px;
}
.sectionBlockContentNarrow{
   padding: 30px 10px 10px 10px;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="doublecol"> 
   <div class="leftCol"> 
    <div class="singleArrow"></div> 
    <div class="sectionBlock"> 
     <div class="sectionBlockContentNarrow">
       SOME TEXT 
     </div> 
    </div> 
   </div> 
   <div class="rightCol"> 
    <div class="singleArrow"></div> 
    <div class="sectionBlock"> 
     <div class="sectionBlockContentNarrow">
       SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials