HTML CSS Border Linear Gradient Corners - html

Hi I have a problem adjusting my linear gradient border. It is looking like this :
I want it to be looking like this ^ .
Could anyone help please.
.bot-right {
position: relative;
height:400px;
}
.bot-right:before, .bot-right:after {
content: "";
position: absolute;
bottom: -3px;
right: -40px;
}
.bot-right:before {
top: -3px;
width: 3px;
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#009ee3), to(transparent));
background-image: -webkit-linear-gradient(transparent, #009ee3);
background-image: -moz-linear-gradient(transparent, #009ee3);
background-image: -o-linear-gradient(transparent, #009ee3);
}
.bot-right:after {
left: -3px;
height: 3px;
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#009ee3), to(transparent));
background-image: -webkit-linear-gradient(right, #009ee3, transparent);
background-image: -moz-linear-gradient(right, #009ee3, transparent);
background-image: -o-linear-gradient(right, #009ee3, transparent);
}
<div class="bot-right "></div>


a simple border-image and can do it
.bot-right {
position: relative;
height:400px;
border:3px solid;
border-image: linear-gradient(90deg,transparent, #009ee3) 3;
}
<div class="bot-right "></div>

Related

Picture Tag doesn't resize properly on loading two sources (png and webp)

I'm building a website that has a 3D book:
My main goal is to support a png and a webp image for all browsers. If I only load one image all is working fine:
.book-container {
display: flex;
align-items: center;
justify-content: center;
perspective: 600px;
}
#keyframes initAnimation {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-30deg);
}
}
.book {
width: 200px;
height: 320px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(-30deg);
transition: 1s ease;
animation: 1s ease 0s 1 initAnimation;
}
.book:hover {
transform: rotateY(0deg);
}
.book > :first-child {
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 200px;
height: 320px;
transform: translateZ(25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: 5px 5px 20px #E5E4E2;
}
.book::before {
position: absolute;
content: ' ';
background-color: blue;
left: 0;
top: 3px;
width: 48px;
height: 314px;
transform: translateX(172px) rotateY(90deg);
background: linear-gradient(90deg,
#fff 0%,
#f9f9f9 5%,
#fff 10%,
#f9f9f9 15%,
#fff 20%,
#f9f9f9 25%,
#fff 30%,
#f9f9f9 35%,
#fff 40%,
#f9f9f9 45%,
#fff 50%,
#f9f9f9 55%,
#fff 60%,
#f9f9f9 65%,
#fff 70%,
#f9f9f9 75%,
#fff 80%,
#f9f9f9 85%,
#fff 90%,
#f9f9f9 95%,
#fff 100%
);
}
.book::after {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 200px;
height: 320px;
transform: translateZ(-25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: -10px 0 50px 10px #666;
}
<a
class="book-container"
href="#"
target="_blank"
rel="noreferrer noopener">
<div class="book">
<img
alt="My Cover"
src="https://i.stack.imgur.com/1MPyO.png"
/>
</div>
</a>
But when I add the picture element to support both, the image loses the resize:
.book-container {
display: flex;
align-items: center;
justify-content: center;
perspective: 600px;
}
#keyframes initAnimation {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-30deg);
}
}
.book {
width: 200px;
height: 320px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(-30deg);
transition: 1s ease;
animation: 1s ease 0s 1 initAnimation;
}
.book:hover {
transform: rotateY(0deg);
}
.book > :first-child {
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 200px;
height: 320px;
transform: translateZ(25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: 5px 5px 20px #E5E4E2;
}
.book::before {
position: absolute;
content: ' ';
background-color: blue;
left: 0;
top: 3px;
width: 48px;
height: 314px;
transform: translateX(172px) rotateY(90deg);
background: linear-gradient(90deg,
#fff 0%,
#f9f9f9 5%,
#fff 10%,
#f9f9f9 15%,
#fff 20%,
#f9f9f9 25%,
#fff 30%,
#f9f9f9 35%,
#fff 40%,
#f9f9f9 45%,
#fff 50%,
#f9f9f9 55%,
#fff 60%,
#f9f9f9 65%,
#fff 70%,
#f9f9f9 75%,
#fff 80%,
#f9f9f9 85%,
#fff 90%,
#f9f9f9 95%,
#fff 100%
);
}
.book::after {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 200px;
height: 320px;
transform: translateZ(-25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: -10px 0 50px 10px #666;
}
<a class="book-container"
href="#"
target="_blank"
rel="noreferrer noopener">
<div class="book">
<picture>
<source srcset="https://i.ibb.co/grB6NbQ/THE-BOOK-cover-image.webp" type="image/webp">
<source srcset="https://i.stack.imgur.com/1MPyO.png" type="image/png">
<img
alt="My Cover"
src="https://i.stack.imgur.com/1MPyO.png"/>
</picture>
</div>
</a>
Any idea what should I change? I guess the main issue is in this part of the code:
.book > :first-child {
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 200px;
height: 320px;
transform: translateZ(25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: 5px 5px 20px #E5E4E2;
}
Here is the full snippet if you want to check it:
https://jsfiddle.net/p01vac52/1/
But I'm not so sure, I didn't expect that the picture element will fully break it. Or do you think it's a better idea to change the source using JS?

As commented,
The srcset attribute selects which image to load based on its size values and device specs, the picture / img elements will still need width/height values to scale the loaded image to the required size.
I added img { width: 100% } to make the image fit inside .book { width: 200px; height: 320px; }.
.book-container {
display: flex;
align-items: center;
justify-content: center;
perspective: 600px;
}
#keyframes initAnimation {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-30deg);
}
}
.book {
width: 200px;
height: 320px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(-30deg);
transition: 1s ease;
animation: 1s ease 0s 1 initAnimation;
}
img {
width: 100%;
}
.book:hover {
transform: rotateY(0deg);
}
.book> :first-child {
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 200px;
height: 320px;
transform: translateZ(25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: 5px 5px 20px #E5E4E2;
}
.book::before {
position: absolute;
content: ' ';
background-color: blue;
left: 0;
top: 3px;
width: 48px;
height: 314px;
transform: translateX(172px) rotateY(90deg);
background: linear-gradient(90deg, #fff 0%, #f9f9f9 5%, #fff 10%, #f9f9f9 15%, #fff 20%, #f9f9f9 25%, #fff 30%, #f9f9f9 35%, #fff 40%, #f9f9f9 45%, #fff 50%, #f9f9f9 55%, #fff 60%, #f9f9f9 65%, #fff 70%, #f9f9f9 75%, #fff 80%, #f9f9f9 85%, #fff 90%, #f9f9f9 95%, #fff 100%);
}
.book::after {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 200px;
height: 320px;
transform: translateZ(-25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: -10px 0 50px 10px #666;
}
<a class="book-container" href="#" target="_blank" rel="noreferrer noopener">
<div class="book">
<picture>
<source srcset="https://i.ibb.co/grB6NbQ/THE-BOOK-cover-image.webp" type="image/webp">
<source srcset="https://i.stack.imgur.com/1MPyO.png" type="image/png">
<img alt="My Cover" src="https://i.stack.imgur.com/1MPyO.png" />
</picture>
</div>
</a>

Responsive button animation CSS

I'm trying to combine the look of one button, with the responsiveness of another button:
Button A: https://codepen.io/vitor-siqueira/pen/xNBExN
Button B: https://codepen.io/AnthonyBmm/pen/poooJmO
I would like to make Button C, which looks and feels exactly like Button A, but it automagically resizes to fit the button text (no wrap, like Button B). At the moment I create 3-4 virtually identical Button A's and adjust the width values of the SVG and the CSS, which... is terrible practice.
I found Button B which has a similar animation but without an SVG and thought that it may be a good start to try and replicate the Button A effect, but I haven't been able to succeed.
Can someone help please?
The attached code from the 2 pens can be found below:
Button A HTML:
<div class="container">
<div class="center">
<button class="btn">
<svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
<polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
<polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
</svg>
<span>HOVER ME</span>
</button>
</div>
</div>
Button A CSS:
#import url('https://fonts.googleapis.com/css?family=Lato:100&display=swap');
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #5CA4EA;
overflow: hidden;
font-family: 'Lato', sans-serif;
}
.container {
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.center {
width: 180px;
height: 60px;
position: absolute;
}
.btn {
width: 180px;
height: 60px;
cursor: pointer;
background: transparent;
border: 1px solid #91C9FF;
outline: none;
transition: 1s ease-in-out;
}
svg {
position: absolute;
left: 0;
top: 0;
fill: none;
stroke: #fff;
stroke-dasharray: 150 480;
stroke-dashoffset: 150;
transition: 1s ease-in-out;
}
.btn:hover {
transition: 1s ease-in-out;
background: #4F95DA;
}
.btn:hover svg {
stroke-dashoffset: -480;
}
.btn span {
color: white;
font-size: 18px;
font-weight: 100;
}
Button B HTML:
<body>
<a href="#">push this and that
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</body>
Button B CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #999;
}
a {
/*border-radius: 12px;*/
border: 3px outset #888;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #eee;
text-transform: uppercase;
letter-spacing: 4px;
overflow: hidden;
box-shadow: 0 0 10px rgb(0, 0, 0, 1);
font-family: verdana;
font-size: 28px;
font-weight: bolder;
text-decoration: none;
background:linear-gradient(160deg, #666, #444);
text-shadow: 0px 0px 2px rgba(0, 0, 0, .5);
transition: 0.2s;
}
a:active {
border: 3px outset #ddd;
color: #fff;
background: linear-gradient(160deg, #666, #444);
text-shadow: 0px 0px 4px #ccc;
box-shadow: 0 0 10px #fff, 0 0 40px #fff, 0 0 80px #fff;
transition-delay: 1s;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #eee);
}
a:active span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #eee);
}
a:active span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #eee);
}
a:active span:nth-child(3) {
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #eee);
}
a:active span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}

Is this what you are looking for?
#import url('https://fonts.googleapis.com/css?family=Lato:100&display=swap');
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #5CA4EA;
overflow: hidden;
font-family: 'Lato', sans-serif;
}
.container {
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.center {
width: 180px;
height: 60px;
position: absolute;
}
.btn {
width: 180px;
height: 60px;
cursor: pointer;
background: transparent;
border: 1px solid #91C9FF;
outline: none;
transition: 1s ease-in-out;
}
svg {
position: absolute;
left: 0;
top: 0;
fill: none;
stroke: #fff;
stroke-dasharray: 150 480;
stroke-dashoffset: 150;
transition: 1s ease-in-out;
}
.btn:hover {
transition: 1s ease-in-out;
background: #4F95DA;
}
.btn:hover svg {
stroke-dashoffset: -480;
}
.btn span {
color: white;
font-size: 18px;
font-weight: 100;
}
button:active {
border: 3px outset #ddd;
color: #fff;
background: linear-gradient(160deg, #666, #444);
text-shadow: 0px 0px 4px #ccc;
box-shadow: 0 0 10px #fff, 0 0 40px #fff, 0 0 80px #fff;
transition-delay: 1s;
}
<div class="container">
<div class="center">
<button class="btn">
<svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
<polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
<polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
</svg>
<span>HOVER ME</span>
</button>
</div>
</div>

This "Correction" of mine was based on the post this post to make svg responsible.
Sorry for the english of google translator.
#import url('https://fonts.googleapis.com/css?family=Lato:100&display=swap');
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #5CA4EA;
overflow: hidden;
font-family: 'Lato', sans-serif;
}
.container {
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.btn {
cursor: pointer;
background: transparent;
border: 1px solid #91C9FF;
outline: none;
transition: 1s ease-in-out;
padding:3%;
padding-top:2%;
padding-bottom:2%;
position: relative;
display: flex;
}
svg {
width: calc(100% + 2px);
height: calc(100% + 2px);
position: absolute;
left: -1px;
top: -1px;
fill: none;
stroke: #fff;
stroke-dasharray: 150 480;
stroke-dashoffset: 150;
transition: 1s ease-in-out;
}
.btn:hover {
transition: 1s ease-in-out;
background: #4F95DA;
}
.btn:hover svg {
stroke-dashoffset: -480;
}
.bg-line{
width:100px;
height:100px;
}
.btn span {
color: white;
font-size: 18px;
font-weight: 100;
}
<div class="container">
<button class="btn">
<!-- edit -->
<svg viewBox="0 0 180 60" class="border" preserveAspectRatio="none" class="border">
<polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
<polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
</svg>
<span>Junior is AWESOME</span>
</button>
</div>
OR
I really wanted to find a more correct way to do this without using SVG, I researched it all day, this is what I got:
I used the Animation, Before and Linear-gradient properties. The animation is not fluid because I'm not really good at it, and above all I recommend using a file just for keyframes.
(The "back" animation can be included later: D)
English from google translator
#import url('https://fonts.googleapis.com/css?family=Lato:100&display=swap');
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #5CA4EA;
overflow: hidden;
font-family: 'Lato', sans-serif;
}
.container {
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.btn {
cursor: pointer;
background: rgb(99, 169, 235);
border: 1px solid #91C9FF;
outline: none;
transition: 1s ease-in-out;
padding:3%;
padding-top:2%;
padding-bottom:2%;
position: relative;
display: flex;
}
.btn::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
margin: -3px; /* !importanté */
border-radius: inherit; /* !importanté */
background: linear-gradient(0deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0) 99%, rgba(255,255,255,0) 100%);
}
.btn:hover::before{
-webkit-animation: all 1s; /* Chrome, Safari, Opera */
animation: all 1s;
transition:animation 1s ease-in-out;
}
#keyframes all {
2% {
background: linear-gradient(-45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.3) 99%, rgba(255,255,255,0) 100%);
}
5% {
background: linear-gradient(-45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.5) 99%, rgba(255,255,255,0) 100%);
}
7% {
background: linear-gradient(-45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
14% {
background: linear-gradient(-23deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
22% {
background: linear-gradient(0deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
28% {
background: linear-gradient(23deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
35% {
background: linear-gradient(45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
43% {
background: linear-gradient(90deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
50% {
background: linear-gradient(120deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
57% {
background: linear-gradient(145deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
64% {
background: linear-gradient(180deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
71% {
background: linear-gradient(200deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
78% {
background: linear-gradient(220deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
85% {
background: linear-gradient(300deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
92% {
background: linear-gradient(320deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
94% {
background: linear-gradient(345deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.9) 99%, rgba(255,255,255,0) 100%);
}
97% {
background: linear-gradient(345deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.5) 99%, rgba(255,255,255,0) 100%);
}
100% {
background: linear-gradient(345deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.3) 99%, rgba(255,255,255,0) 100%);
}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes all {
2% {
background: linear-gradient(-45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.3) 99%, rgba(255,255,255,0) 100%);
}
5% {
background: linear-gradient(-45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.5) 99%, rgba(255,255,255,0) 100%);
}
7% {
background: linear-gradient(-45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
14% {
background: linear-gradient(-23deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
22% {
background: linear-gradient(0deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
28% {
background: linear-gradient(23deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
35% {
background: linear-gradient(45deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
43% {
background: linear-gradient(90deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
50% {
background: linear-gradient(120deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
57% {
background: linear-gradient(145deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
64% {
background: linear-gradient(180deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
71% {
background: linear-gradient(200deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
78% {
background: linear-gradient(220deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
85% {
background: linear-gradient(300deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
92% {
background: linear-gradient(320deg, rgba(255,255,255,0) 72%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%);
}
94% {
background: linear-gradient(345deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.9) 99%, rgba(255,255,255,0) 100%);
}
97% {
background: linear-gradient(345deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.5) 99%, rgba(255,255,255,0) 100%);
}
100% {
background: linear-gradient(345deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.3) 99%, rgba(255,255,255,0) 100%);
}
}
.btn:hover {
transition: 1s ease-in-out;
background: #4F95DA;
}
.btn:hover svg {
stroke-dashoffset: -480;
}
.bg-line{
width:100px;
height:100px;
}
.btn span {
color: white;
font-size: 18px;
font-weight: 100;
}
<div class="container">
<button class="btn">
<!-- edit -->
<span>Junior is AWESOME</span>
</button>
</div>

CSS gradient to create two different color design

I am trying to create a specific shape with specific color to keep it as a background. I successfully created gradient color that I want but I am struggling with getting shape right.
Here is what I have done and what is am trying to achieve,
My Work :
Expectation :
Code :
.grad {
height: 400px;
width: 900px;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
<div class="grad"></div>
I am open to use any other method as long as it is only one 'div'. I don't want to use two different div which are causing many issues in responsive design. I tried using clip-path but that too did not help because of the nature of the design.
Any help would be appreciated.

Use multiple gradient then adjust dimension and position to obtain what you want:
.grad {
height: 100px;
width: 300px;
background:
linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0) 0 0/100% calc(100% - 10px) no-repeat,
linear-gradient(110deg, #62e6a5 52%, transparent 0) 0 100%/100% 100% no-repeat;
}
<div class="grad"></div>

Use pseudo-elements like :before and :after
.grad{
position: relative;
height:200px;
width:450px;
margin-bottom: 10px;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
.grad-new{
position: relative;
height:200px;
width:450px;
margin-bottom: 10px;
overflow: hidden;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
.grad-new:before{
content: '';
position: absolute;
width: 3%;
height: 10px;
bottom: 0;
right: 55.6%;
background: #62e6a5;
transform: skew(-20deg);
}
.grad-new:after{
content: '';
position: absolute;
width: 100%;
height: 10px;
bottom: 0;
left: 44.4%;
background: #fff;
transform: skew(-20deg);
}
<div class="grad"></div>
<div class="grad-new"></div>

Linear gradient not working with div

I am creating trapezoid using following CSS:
.trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
background: linear-gradient(red, yellow);
}
<div class='trapezoid'></div>
The linear-gradient attribute is not working. I want the trapezoid as shadow i.e its color should eventually fade away. Can anyone please help me on this?

Or use a transform on a suitably sized element (or pseudo-element).
.trapezoid {
width: 100px;
height: 100px;
margin: auto;
transform: perspective(100px) rotateX(40deg);
background: linear-gradient(red, yellow);
}
<div class='trapezoid'></div>

You cannot apply gradient in this way as you are using border and your element has a height of 0 so background won't be visible.
Instead you can try to use multiple gradient to create the shape:
.trapezoid {
height: 100px;
width: 200px;
background:
linear-gradient(to bottom left,white 50%,transparent 52%) 100% 0/40px 100% no-repeat,
linear-gradient(to bottom right,white 50%,transparent 52%) 0 0/40px 100% no-repeat,
linear-gradient(red, yellow);
}
<div class='trapezoid'></div>
Or use clip-path:
.trapezoid {
height: 100px;
width: 200px;
background: linear-gradient(red, yellow);
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
<div class='trapezoid'></div>
Another method with skew and pseudo-element:
.trapezoid {
height: 100px;
width: 200px;
position: relative;
}
.trapezoid:before,
.trapezoid:after{
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 60%;
background: linear-gradient(red, yellow);
transform:skew(20deg);
transform-origin:bottom right;
}
.trapezoid:after {
left: 0;
transform:skew(-20deg);
transform-origin:bottom left;
}
<div class='trapezoid'></div>

Background image bottom gradient with CSS3

I need this type gradient in the bottom of a background image
I can't figure out – how to I can make this type gradient with CSS. I've uploaded my code in jsFiddle.
.single-blog-bg {
background-size: cover;
background-attachment: fixed;
height: 350px;
position: relative;
}
.single-blog-bg:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 300px;
bottom: 0;
background: linear-gradient(to bottom, white 10%, white 30%, white 60%, white 100%);
opacity: .5;
}
<div class="single-blog-bg" style="background-image: url(https://i.stack.imgur.com/VT8SR.jpg)"></div>
Here showing white gradient but not like what I expect.
Has there anybody who will help me to get the exact CSS code?

Add This Style to Image:
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

Use background: linear-gradient(to bottom, rgba(255,255,255,0), white 100%); for the bottom div.
I fork your jsfiddle here.

You can use the background like this.
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
Check the codepen here

Try changing css-
i have done for you
.single-blog-bg {
background-size: cover;
background-attachment: fixed;
height: 350px;
position: relative;
}
.single-blog-bg:before{
content: '';
position: absolute;
display: flex;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to bottom, rgb(0, 0, 0) 30%, rgb(255, 255, 255) 100%);
opacity: .5;
}
do check- https://codepen.io/djmayank/pen/vJyoVe

Have you tried using alpha in the color?
Change the gradient rule to something like this:
.single-blog-bg:before{
content: '';
position: absolute;
left: 0;
right: 0;
top: 100px;
bottom: 0;
background: linear-gradient(to bottom, rgba(255,255,255,0) 10%, rgba(255,255,255,0.9) 100%);
}
Edit: Remove the opacity property, change the bottom color alpha and give the effect more height

.single-blog-bg {
background-size: cover;
background-attachment: fixed;
height: 350px;
position: relative;
}
.single-blog-bg:before {
content: '';
position: absolute;
left: 0;
right: 0;
/*top: 300px*/
bottom: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 10%, rgba(255, 255, 255, 0.13) 60%, rgba(255, 255, 255, 0.04) 70%);
/* opacity: .5; */
height: 100%;
}
opacity: .5;
}
<div class="single-blog-bg" style="background-image: url(https://images.unsplash.com/photo-1495935225637-fa5838607df7?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=)">
</div>