Create dynamic arrow-like shape with CSS - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Arrow

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

Description

Create dynamic arrow-like shape with CSS

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>arrow shape &amp; borders via gradient</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>

div {<!--from   w  ww.jav a 2s.  com-->
   display: table;
   padding: 0.25em 2em 0.25em 0.5em;
   background: linear-gradient(-45deg, transparent 1em, #00A2E8 1em) bottom,
   linear-gradient(-135deg, transparent 1em, #25B1ED 1em) top;
   background-repeat: no-repeat;
   background-size: 100% 50%;
   font-size: 3vw;
   color: white;
   text-shadow: -1px -1px 1px black, 1px 1px gray;
}
html {
   padding:2vw;
   background:tomato;
}
.bis {
   margin-top:10px;
   background:
   linear-gradient(to top, white, white) no-repeat
   linear-gradient(to left, transparent 1.45em, white 1.45em) no-repeat
   linear-gradient(to left, transparent 1.45em, white 1.45em) no-repeat bottom
   linear-gradient(-45deg, transparent 1em, white 1em, white 1.1em, #00A2E8 1em) bottom,
   linear-gradient(-135deg, transparent 1em, white 1em, white 1.1em, #25B1ED 1em) top
   rgba(0, 0, 0, 0.05);
   background-repeat: no-repeat;
   background-size: 0.08em 100%, 100% 0.075em, 100% 0.075em, 100% 50%, 100% 50%;
}
.rounded {
   border-radius:0.5em 0 0 0.5em;
   box-shadow:inset 0.08em 0 white;
   background-color:none;
}
      </style> 
 </head> 
 <body translate="no"> 
  <div class="camera_caption">
    this is a test this is a test this is a test 
  </div> 
  <div class="camera_caption bis">
    this is a test this is a test this is a test this is a test 
  </div> 
  <div class="camera_caption bis rounded">
    this is a test this is a test this is a test this is a test this is a test 
  </div>  
 </body>
</html>

Related Tutorials