Creating a curbed rectangular - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Shape

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

Description

Creating a curbed rectangular

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Curved pagination container (pure css)</title> 
  <style>

@import url(https://fonts.googleapis.com/css?family=Roboto);
.wrapper #container {<!--from  w ww . j a v a  2  s. c  o m-->
   position: relative;
}
.wrapper #container #box {
   position: absolute;
   top: -20px;
   left: 119px;
   background-color: black;
   border-radius: 20%;
   height: 40px;
   width: 162px;
}
.wrapper #container .shadow {
   position: absolute;
   top: -40px;
   width: 100px;
   height: 40px;
   border-radius: 50%;
}
.wrapper #container #shadow1 {
   left: 22px;
   box-shadow: 40px 26px 0 0 black;
}
.wrapper #container #shadow2 {
   right: 22px;
   box-shadow: -40px 26px 0 0 black;
}
.wrapper #dots-container {
   position: absolute;
   left: 133px;
   top: -14px;
}
.wrapper #dots-container .dot {
   width: 10px;
   height: 10px;
   background-color: pink;
   border-radius: 50%;
   display: inline-block;
   margin-left: 5px;
}
.wrapper #dots-container .active {
   background-color: red;
}
body {
   background-color: pink;
}
body .wrapper {
   position: relative;
   margin-top: 100px;
   margin-left: auto;
   margin-right: auto;
   border-radius: 30px;
   background-color: black;
   width: 400px;
}
body .content {
   padding: 30px;
   color: #222;
   font-size: 18px;
   line-height: 30px;
   text-indent: 45px;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <div id="container"> 
    <div id="box"></div> 
    <div id="shadow1" class="shadow"></div> 
    <div id="shadow2" class="shadow"></div> 
    <div id="dots-container"> 
     <div class="dot active"></div> 
     <div class="dot active"></div> 
     <div class="dot"></div> 
     <div class="dot"></div> 
     <div class="dot"></div> 
     <div class="dot"></div> 
     <div class="dot"></div> 
    </div> 
   </div> 
   <div class="content">
     this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. 
     this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. 
     this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials