Looking to design a unique shape resembling this:
https://i.sstatic.net/Lf6Qp.png
The shape is like a triangular form or even a rounded square (which isn't fully visible on the screen).
I attempted to use transparent borders to create it. However, the borders are not showing as transparent, hindering the shape's visibility.
.hero {
background-color: #001d40;
padding: 182px 0 100px 0;
color: #ffffff;
position: relative;
overflow: hidden;
}
.hero__gradient {
width: 30vw;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: linear-gradient(-45deg, #20c0f5, #a38cff, #00c4ff, #20c0f5);
background-size: 400% 400%;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
border-bottom: solid 30px transparent;
border-top: solid 30px transparent;
display: inline-block;
vertical-align: middle;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45272a2a31363137243505706b756b7771753570717e7168">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<section class="hero">
<div class="hero__gradient"></div>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
</div>
</div>
</section>Tried increasing border sizes (from 30px) to 270px, the distance from the bottom of the div to triangle point. Yet, this doesn't adjust well with responsiveness.
Seems like my linear-gradient fills the space instead of being transparent?
Any suggestions for achieving this differently?