Create an oval with arrow - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Arrow

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

Description

Create an oval with arrow

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">

.progressbar li {
   list-style: none;
   position: relative;
   width: 88px;
   height: 40px;
   background-image: url('https://www.java2s.com/style/demo/InternetExplorer.png');
}
.progressbar li:before
{
   content:counter(step) !important;<!--  w ww .ja va  2 s  . c o m-->
   counter-increment:step !important;
   line-height:35px !important;
   /*border:3px solid #ddd !important;*/
   display:block !important;
   text-align:center !important;
   margin: 0 auto 10px auto !important;
   background-color: white !important; /*white orig */
   border-radius: 100em 100em 100em 100em;
   width:34px !important;
   height:34px !important;
   position: absolute;
   top: 3px;
   left: 3px;
}


      </style> 
 </head> 
 <body> 
  <ul class="progressbar"> 
   <li class="second"></li> 
  </ul>  
 </body>
</html>

Related Tutorials