Gradient Effect for Triangle Shape Borders

Gradient effect for triangle shape borders

I have done it drawing shape and avoiding borders. It is better to use gradient for that.

Solution : here is jsfiddle code

.progress-indicator-wrapper {

  margin: 0 10px;

  font-size: 16px;

  color: #2f2f2f;

   background-image: linear-gradient(to bottom, #e7e7e7, #d8d8d8);

}

.progress-indicator {

    display: table;

    width: 100%;

    text-align: center;

    line-height: 20px;

}

.progress-indicator > div {

    display: table-cell;

    margin-top: 0;

    padding: 10px;

    position: relative;

}

.progress-indicator > .progress-active {

  padding: 20px 20px 20px 30px;

  color: #fff;

   background-image: linear-gradient(to bottom, #3498db, #2980b9);

}

.progress-indicator > .progress-active + div {

  padding-left: 20px;

}

/* Triangle arrow define  */

.progress-active::before, .progress-active::after {

  content: "";

  width: 34px;

  padding-bottom: 30px;

  position: absolute;

  overflow: hidden;

  transform: rotate(90deg);

  z-index: 2;  

  -webkit-transform-origin: 0 0;

  -ms-transform-origin: 0 0;

  transform-origin: 0 0;

  background-image: linear-gradient(45deg, #e7e7e7, #d8d8d8);

  -webkit-transform-origin: 0 100%;

  -ms-transform-origin: 0 100%;

  transform-origin: 0 100%;

  -ms-transform: rotate(45deg);

  -webkit-transform: rotate(45deg);

  transform: rotate(120deg) skewX(-30deg);

}

.progress-active::before {

  top: -30px;

  left: 0px;

}

.progress-active::after {

  top: -30px;

  right: -34px;

   background-image: linear-gradient(45deg, #3498db, #2980b9);

}

<div class="progress-indicator-wrapper">

    <div class="progress-indicator">

        <div>

            <span class="progress-txt">Step 1 </span>

        </div>

        <div class="progress-active">

            <span class="progress-txt">Step 2</span>

        </div>

        <div>

            <span class="progress-txt">Step 3</span>

        </div>

        <div>

            <span class="progress-txt">Step 4</span>

        </div>

        <div>

            <span class="progress-txt">Step 5</span>

        </div>

    </div>

</div>

Add colour gradient to border (upright triangle shape)?

You can consider gradient to color the shape then rely on some persepctive transformation to create the triangle effect.

I used different colors so we can clearly identify them and I considerd pseudo element to optimize the code:

h1 {

  color: green;

}

body {

  background-color: black;

  overflow: hidden;

  margin: 0;

}

body:before {

  content: "";

  position: absolute;

  left: 8vw;

  top: 0;

  bottom: -20px;

  width: 12vw;

  background: linear-gradient(to bottom, blue 30%, yellow);

  z-index: -1;

  animation: move 7s ease-in-out forwards;

  transform-origin: bottom;

}

@keyframes move {

  0% {

    transform: perspective(100px) rotateX(-30deg) rotate(-30deg) scaleX(0.4);

  }

  50% {

    transform: perspective(100px) rotateX(-30deg) rotate(30deg) scaleX(0.4);

  }

  100% {

    transform: perspective(100px) rotateX(-30deg) rotate(0deg) scaleX(1);

  }

}

<h1>

  Some text

</h1>

Creating a triangle in css with a gradient background

Creating triangles (or other shapes - pentagons, hexagons, octagons, decagons, dodecagons, tetradecagons, octadecagons and so on) with a gradient (or any other kind of image background) is really easy with CSS transforms.

But in this case you don't even need a triangle. You just need to rotate a square pseudo-element by 45deg and apply the gradient on that from corner to corner.

demo

<div class='warn'></div>

CSS:

.warn {
  position: relative;
  margin: 0 auto;
  border: solid 1px darkred;
  width: 12em; height: 3em;
  border-radius: .2em;
  background: linear-gradient(lightcoral, firebrick);
}
.warn:before {
  position: absolute;
  top: 50%; left: 0;
  margin: -.35em -.45em;
  border-left: inherit; border-bottom: inherit;
  /* pick width & height such that 
     the diagonal of the square is 1em = 1/3 the height of the warn bubble */
  width: .7em; height: .7em;
  border-radius: 0 0 0 .2em;
  transform: rotate(45deg);
  background: linear-gradient(-45deg, firebrick -100%, lightcoral 200%);
  content: '';
}

Making jagged triangle border in CSS

You can use gradients to create a zig-zag patterned background, use the ::after pseud-element to apply it like a border.

.header{
    color: white;
    background-color: #2B3A48;
    text-align: center;
}
.header::after {
    content: " ";
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 36px;
    background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
}

<div class="header"><h1>This is a header</h1></div>

CSS triangle at bottom of div with gradient

After much sweat I present to you this fully CSS example! Fully scalable!

Have a fiddle!

HTML

<div id="header" class="page-talk">
        <h1 class="page-title">talk</h1>
</div>

CSS

html, body {
    margin:0;
    padding:0;
}
div#header {
    height: 150px;
    width: 100%;
    background-image: -webkit-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
    background-image: -moz-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
    background-image: -o-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
    background-image: linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 100;
}
h1.page-title {
    font-size: 6em;
    font-weight: 100;
    font-family:sans-serif;
    color: white;
    margin:0;
    margin-left:15px;
}
#header {
    position: relative;
}
#header:before {
    content:"";
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    left: 0;
    border-bottom: 20px solid rgba(255, 255, 255, 1);
    border-right: 20px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#header:after {
    content:"";
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    right: 0;
    border-bottom: 20px solid rgba(255, 255, 255, 1);
    border-left: 20px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Shape with striped background and a triangular cut on top

You can achieve this using either of the following 2 options.

Option 1: Using box-shadow and an extra pseudo-element.

In this option an extra pseudo-element of size 20px is added (white/grey color) and using appropriately positioned box-shadows, the striped pattern is achieved. This method can be useful if the dimensions of your flag element is fixed.

#flag {

  width: 110px;

  height: 56px;

  padding-top: 15px;

  position: relative;

  background: red;

  color: white;

  font-size: 11px;

  letter-spacing: 0.2em;

  text-align: center;

  text-transform: uppercase;

  float: left;

  overflow: hidden;

}

#flag:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 0;

  height: 0;

  border-top: 25px solid #eee;

  border-left: 55px solid transparent;

  border-right: 55px solid transparent;

}

#flag:after {

  content: "";

  position: absolute;

  top: 0px;

  left: -30px;

  height: 10px;

  width: 150px;

  background: #eee;

  -webkit-transform: rotate(-45deg);

  -moz-transform: rotate(-45deg);

  transform: rotate(-45deg);

  box-shadow: -20px 60px 0px #eee, -20px 80px 0px #eee, -20px 20px 0px #eee, -20px -20px 0px #eee, 0px 40px 0px #eee;

}

<div id="flag"></div><span>SOME TEXT HERE</span>