How can I correctly add a shadow and a gradient to my shape?

  • A+
Category:Languages

I want to make the following design:

How can I correctly add a shadow and a gradient to my shape?

I tried with :after and :before but it does not work. Here’s my current code:

.design {   background: #ea053a;   display: inline-block;   height: 155px;   margin-left: 33px;   margin-right: 40px;   position: relative;   width: 228px; }  .design:before {   border-top: 43px solid #ea053a;   border-left: 50px solid transparent;   border-right: 50px solid transparent;   margin-right: 40px;   content: "";   height: 0;   left: 0;   position: absolute;   top: 55px;   margin-top: 100px;   width: 128px; }
<div class="design"></div>

(fiddle)

How could I leave it the same as the original design and with the following two properties?:

box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2); background-image: linear-gradient(to bottom, #ea053a, #d0021b); 

 


Here is an idea with skew transformation and drop-shadow filter. You simply need some extra element to correctly have the gradient. The trick is to invert the skew to keep the gradient direction correct (not needed if we deal with solid color)

.box {   width: 150px;   height: 150px;   position: relative;   z-index:0;   overflow: hidden;   filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8)); }  .box span {   position: absolute;   z-index:-1;   top: 0;   width: 50%;   height: 100%;   overflow: hidden; }  .box span:first-of-type {   left: 0;   transform: skewY(35deg);   transform-origin: top right; }  .box span:last-of-type {   right: 0;   transform: skewY(-35deg);   transform-origin: top left; }  .box span::before {   content: "";   position: absolute;   top: 0;   left: 0;   right: 0;   bottom: 0;   background: linear-gradient(to bottom, blue , red ); }  .box span:first-of-type::before {   transform: skewY(-35deg);   transform-origin: top right; }  .box span:last-of-type::before {   transform: skewY(35deg);   transform-origin: top left; }  p {  margin:0;  color:#fff;  font-size:45px;  line-height:100px;  text-align:center; }
<div class="box">   <span></span><span></span>   <p>29</p> </div>

Here is how we can do with a left or right gradient. In this case we don't need extra elements because the skew will not affect the direction:

.box {   width: 150px;   height: 150px;   position: relative;   z-index:0;   overflow: hidden;   filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8)); }  .box:before, .box:after{   content:"";   position: absolute;   z-index:-1;   top: 0;   width: 50%;   height: 100%;   overflow: hidden;   background:linear-gradient(to right,blue,red);   background-size:200% 100%; }  .box:before{   left: 0;   transform: skewY(35deg);   transform-origin: top right; }  .box:after{   right: 0;   transform: skewY(-35deg);   transform-origin: top left;   background-position:right; }  p {  margin:0;  color:#fff;  font-size:45px;  line-height:100px;  text-align:center; }
<div class="box">   <p>29</p> </div>

And here is with an arbitrary gradient:

.box {   width: 150px;   height: 150px;   position: relative;   z-index:0;   overflow: hidden;   filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8)); }  .box span {   position: absolute;   z-index:-1;   top: 0;   width: 50%;   height: 100%;   overflow: hidden; }  .box span:first-of-type {   left: 0;   transform: skewY(35deg);   transform-origin: top right; }  .box span:last-of-type {   right: 0;   transform: skewY(-35deg);   transform-origin: top left; }  .box span::before {   content: "";   position: absolute;   top: 0;   left: 0;   right: 0;   bottom: 0;   background: linear-gradient(35deg, blue , red );   background-size:200% 100%; }  .box span:first-of-type::before {   transform: skewY(-35deg);   transform-origin: top right; }  .box span:last-of-type::before {   transform: skewY(35deg);   transform-origin: top left;   background-position:right; }  p {  margin:0;  color:#fff;  font-size:45px;  line-height:100px;  text-align:center; }
<div class="box">   <span></span><span></span>   <p>29</p> </div>

Since each element is taking 50% of the width we make the background to be 200% to have its size as the main container then we adjust the position to create the illusion of one background. It's like each element will show half of the main background.

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: