CSS triangle with border - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Shape

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

Description

CSS triangle with border

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  gc-nomade</title> 
  <style>

.triangle {<!-- w  w  w.  ja  v a2 s  .  com-->
   display: inline-block;
   margin: 0 1em;
   padding-top: 5px;
   width: 10em;
   border-bottom: 2px solid;
   overflow: hidden;
   position: relative;
   text-align: center;
   color: turquoise;
   text-shadow: 1px 1px 1px black, -1px -1px 1px white;
   box-shadow: 0 4px 5px -5px black;
}

.triangle p {
   margin: 0;
   padding: 0;
   display: inline-block;
   max-width: 50%;
   padding-bottom: 5%;
}

.triangle:before {
   content: '';
   display: inline-block;
   padding-top: 50%;
   vertical-align: bottom;
}

.triangle .notext {
   width: 100%;
   background: linear-gradient(to bottom right, pink 5%, yellow 15%, purple 30%);
   padding-top: 100%;
   position: absolute;
   z-index: -1;
   border: 2px solid;
   left: 0;
   transform: rotate(45deg);
   transform-origin: 24.75% 59.6%;
   box-shadow: 0 0 5px black;
}

.triangle+.triangle {
   width: 15em;
}

.triangle+.triangle+.triangle {
   width: 8em;
}

div#auto.triangle {
   width: auto;
}

div#auto2.triangle {
   width: auto;
   max-width: 30em;
}

#auto2.triangle p {
   vertical-align: top;
   padding-top: 25%;
   max-width: 60%;
   text-indent: 8%;
}

#auto2.triangle p:before {
   content: '';
   width: 12%;
   float: right;
   height: 1em;
}

body {
   background: repeating-linear-gradient(to left, gray, purple, lime, violet, turquoise, orange, white 5em);
   text-align: center;
}

      </style> 
 </head> 
 <body translate="no"> 
  <div class="triangle"> 
   <p>SOME TEXTE</p> 
   <span class="notext"></span> 
  </div> 
  <div class="triangle"> 
   <p>AND SOME MORE TEXTE HERE</p> 
   <span class="notext"></span> 
  </div> 
  <div class="triangle" id="auto"> 
   <p>AND SOME MORE TEXTE HEREAND SOME MORE TEXTE HERE</p> 
   <span class="notext"></span> 
  </div> 
  <div class="triangle"> 
   <p>TEXTE</p> 
   <span class="notext"></span> 
  </div> 
  <div class="triangle" id="auto2"> 
   <p>AND SOME MORE TEXTE HERE AND SOME MORE TEXTE HERE AND SOME MORE TEXTE HERE AND SOME MORE TEXTE HERE</p> 
   <span class="notext"></span> 
  </div>  
 </body>
</html>

Related Tutorials