CODEWITHSUNDEEP
htmlcssgradient
Bhuwan
Bhuwan

Reputation: 16855

How to use gradient in border in CSS3?

enter image description here

I want the above result, cant use the image because the height of the div is not fixed.

Any help will be appriciated.

Upvotes: 2

Views: 515

Answers (2)

Mohammad Usman
Mohammad Usman

Reputation: 39382

SVG can be used to create such shapes. It offers simplicity and scale-ability.

However in case your case as you need flexible height element, may be it doesn't fit your needs. I'm leaving my answer here for a possible alternate for some similar situations where it might be handy.

We can use SVG's path element to create a shape like above and stroke / fill it with some solid color, gradient or a pattern.

Only one attribute d is used to define shapes in path element. This attribute itself contains a number of short commands and few parameters that are necessary for those commands to work.

Following code will create the above shape:

<path d="M0,25 L25,30 V20
         Q25,5 40,5 L460,5
         Q475,5 475,20 L475,170
         Q475,185 460,185 L40,185
         Q25,185 25,170 L25,50 Z" />

Below is a brief description of path commands used in above code:

  • M command is used to define the starting point. It appears at the beginning and specify the point from where drawing should start.
  • L and V commands are used to draw straight lines.
  • Q command is used to draw curves.
  • Z command is used to close current path. It draws a straight line from current point to the starting point to close the shape.

Output Image:

Image with gradient border

Working Example:

body {
  padding: 10px;
}
<svg width="500" height="200" viewBox="0 0 500 200">
  <defs>
    <linearGradient id="grad" x2="0" y2="1">
      <stop offset="0" stop-color="yellow" />
      <stop offset="0.5" stop-color="orange" />
      <stop offset="1" stop-color="red" />
    </linearGradient>
  </defs>
  <path d="M0,25 L25,30 V20
           Q25,5 40,5 L460,5
           Q475,5 475,20 L475,170
           Q475,185 460,185 L40,185
           Q25,185 25,170 L25,50 Z" stroke="url(#grad)" stroke-width="2" fill="none" />
</svg>

Useful Resources:

Below are some useful links for SVG:

Upvotes: 2

Super User
Super User

Reputation: 9642

You can use pseudo classes & gredient background to creating this. check updated snippet below ...

.msgBox {
  padding: 3px;
  background: #f9db31;
  background: -webkit-linear-gradient(#f9db31 0%, #ff0000 100%);
  background: -moz-linear-gradient(#f9db31 0%, #ff0000 100%);
  background: -o-linear-gradient(#f9db31 0%, #ff0000 100%);
  background: linear-gradient(#f9db31 0%, #ff0000 100%);
  float: left;
  margin: 50px;
  position: relative;
  border-radius: 5px;
}
.msgBox::before {
  border-bottom: 30px solid transparent;
  border-right: 30px solid #f9db31;
  border-top: 0 solid transparent;
  content: "";
  height: 0;
  left: -27px;
  position: absolute;
  top: 25px;
  width: 0;
  z-index: 999;
}
.msgBox::after {
  border-bottom: 28px solid transparent;
  border-right: 28px solid #fff;
  border-top: 0 solid transparent;
  content: "";
  height: 0;
  left: -21px;
  position: absolute;
  top: 27px;
  width: 0;
  z-index: 999;
}
.innerBox {
  width: 400px;
  min-height: 200px;
  background: #fff;
  border-radius: 5px;
}
<div class="msgBox">
<div class="innerBox">

</div>
</div>

Upvotes: 6

Related Questions