Create an arrow on right side of the box - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Arrow

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

Description

Create an arrow on right side of the box

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">


div.callout {<!-- w  w w .  j  a  v  a  2  s .  com-->
   height: 20px;
   width: 130px;
   z-index: 1;
}
div.callout {
   background-color: #444;
   background-image: -moz-linear-gradient(top, #444, #444);
   position: relative;
   color: #ccc;
   padding: 20px;
   border-radius: 3px;
   box-shadow: 0px 0px 20px #999;

   min-height: 20px;
   border: 1px solid #333;
   text-shadow: 0 0 1px #000;
}
.callout::before {
   content: "";
   width: 0px;
   height: 0px;
   border: 0.8em solid transparent;
   position: absolute;
}
.callout.top::before {
   left: 0%;
   bottom: -20px;
   border-top: 11px solid #444;
}
.callout.bottom::before {
   left: 45%;
   top: -20px;
   border-bottom: 10px solid #444;
}
.callout.right::before {
   left: -20px;
   top: 40%;
   border-right: 10px solid #444;
}

.callout.left::before {
   right: -20px;
   top: 50%;
   transform: translateY(-50%);
   border-left: 10px solid #444;
}


      </style> 
 </head> 
 <body> 
  <div class="callout left">
    test 
  </div>  
 </body>
</html>

Related Tutorials