How to use gradient in border in CSS3? - html

Question

I want the above result, cant use the image because the height of the div is not fixed.
Any help will be appriciated.

Answer 1

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>

Answer 2

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:
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:
Specification
MDN