How can I correctly add a shadow and a gradient to my shape?
Clash Royale CLAN TAG#URR8PPP
17
I want to make the following design:
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);
html css css3 css-shapes linear-gradients
edited Feb 6 at 17:40
MTCoster
3,83422141
asked Feb 6 at 9:24
ManguxMangux
1658
add a comment |
17
I want to make the following design:
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);
html css css3 css-shapes linear-gradients
edited Feb 6 at 17:40
MTCoster
3,83422141
asked Feb 6 at 9:24
ManguxMangux
1658
2
Just use a width of 0 for the::before. jsfiddle.net/z3yj1m0p
– Mr Lister
Feb 6 at 9:32
add a comment |
17
17
17
4
I want to make the following design:
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);
html css css3 css-shapes linear-gradients
edited Feb 6 at 17:40
MTCoster
3,83422141
asked Feb 6 at 9:24
ManguxMangux
1658
I want to make the following design:
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);
.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>.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>html css css3 css-shapes linear-gradients
html css css3 css-shapes linear-gradients
edited Feb 6 at 17:40
MTCoster
3,83422141
asked Feb 6 at 9:24
ManguxMangux
1658
edited Feb 6 at 17:40
MTCoster
3,83422141
asked Feb 6 at 9:24
ManguxMangux
1658
edited Feb 6 at 17:40
MTCoster
3,83422141
edited Feb 6 at 17:40
MTCoster
3,83422141
edited Feb 6 at 17:40
MTCoster
3,83422141
3,83422141
asked Feb 6 at 9:24
ManguxMangux
1658
asked Feb 6 at 9:24
ManguxMangux
1658
asked Feb 6 at 9:24
ManguxMangux
1658
1658
2
Just use a width of 0 for the::before. jsfiddle.net/z3yj1m0p
– Mr Lister
Feb 6 at 9:32
add a comment |
2
Just use a width of 0 for the::before. jsfiddle.net/z3yj1m0p
– Mr Lister
Feb 6 at 9:32
2
2
Just use a width of 0 for the
::before. jsfiddle.net/z3yj1m0p– Mr Lister
Feb 6 at 9:32
Just use a width of 0 for the
::before. jsfiddle.net/z3yj1m0p– Mr Lister
Feb 6 at 9:32
add a comment |
5 Answers
5
active
oldest
votes
11
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.
edited Feb 6 at 14:42
isherwood
37.3k1082111
answered Feb 6 at 9:33
Temani AfifTemani Afif
75.9k94487
Thanks for all, but this response It is a little more exact. Thank you!
– Mangux
Feb 6 at 9:56
add a comment |
3
You can use clip-path as I did. Here is my solution.
.design
background: #ea053a;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
height: 155px;
width: 155px;
.month
text-align:center;
padding: 1rem 0 .25rem 0;
color:#fff;
font-weight:bold;
font-size: 18px;
.day
text-align: center;
font-size: 60px;
font-weight:bold;
color: #fff;
<div class="design">
<div class="month">Diciembre</div>
<div class="day">29</div>
</div>edited Feb 6 at 9:44
Lelio Faieta
4,13852446
answered Feb 6 at 9:35
NoLimitsNoLimits
5619
4
there is no shadow and no gradient
– Temani Afif
Feb 6 at 9:42
add a comment |
0
If you change your CSS to the following minor changes, then you can achieve the result that you have expected:
.design
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
.design:before
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
Here is the working of the above CSS:
.design
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
.design:before
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
<div class="design">
</div>Hope this was helpful.
My Fiddle
edited Feb 6 at 14:43
isherwood
37.3k1082111
answered Feb 6 at 10:00
Code_NinjaCode_Ninja
1,270728
add a comment |
-1
Change to (only changed lines listed, keep everything else as-is):
.design:before
...
border-left: 114px solid transparent;
border-right: 114px solid transparent;
...
width: 0;
answered Feb 6 at 9:41
jvdmrjvdmr
52128
add a comment |
-1
Here is my solution to add shadow and gradient to the shape
.design
background: #ea053a;
display: inline-block;
height: 155px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 228px;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
.triangle
position: absolute;
height: 100px;
top: 155px;
width: 228px;
-webkit-clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
background-color: #ea053a;
transform: rotate(180deg);
<div class="design">
<div class="triangle">
</div>
</div>answered Feb 6 at 12:25
ChintanChintan
193
2
where is the shadow and the gradient?
– Temani Afif
Feb 6 at 13:51
can you please edit the post and update it in the answer, if it is possible, then it is a good solution
– Code_Ninja
Feb 7 at 5:28
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54550209%2fhow-can-i-correctly-add-a-shadow-and-a-gradient-to-my-shape%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
11
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.
edited Feb 6 at 14:42
isherwood
37.3k1082111
answered Feb 6 at 9:33
Temani AfifTemani Afif
75.9k94487
Thanks for all, but this response It is a little more exact. Thank you!
– Mangux
Feb 6 at 9:56
add a comment |
11
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.
edited Feb 6 at 14:42
isherwood
37.3k1082111
answered Feb 6 at 9:33
Temani AfifTemani Afif
75.9k94487
Thanks for all, but this response It is a little more exact. Thank you!
– Mangux
Feb 6 at 9:56
add a comment |
11
11
11
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.
edited Feb 6 at 14:42
isherwood
37.3k1082111
answered Feb 6 at 9:33
Temani AfifTemani Afif
75.9k94487
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.
.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>.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>.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>.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>.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>.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>edited Feb 6 at 14:42
isherwood
37.3k1082111
answered Feb 6 at 9:33
Temani AfifTemani Afif
75.9k94487
edited Feb 6 at 14:42
isherwood
37.3k1082111
edited Feb 6 at 14:42
isherwood
37.3k1082111
edited Feb 6 at 14:42
isherwood
37.3k1082111
37.3k1082111
answered Feb 6 at 9:33
Temani AfifTemani Afif
75.9k94487
answered Feb 6 at 9:33
Temani AfifTemani Afif
75.9k94487
answered Feb 6 at 9:33
Temani AfifTemani Afif
75.9k94487
75.9k94487
Thanks for all, but this response It is a little more exact. Thank you!
– Mangux
Feb 6 at 9:56
add a comment |
Thanks for all, but this response It is a little more exact. Thank you!
– Mangux
Feb 6 at 9:56
Thanks for all, but this response It is a little more exact. Thank you!
– Mangux
Feb 6 at 9:56
Thanks for all, but this response It is a little more exact. Thank you!
– Mangux
Feb 6 at 9:56
add a comment |
3
You can use clip-path as I did. Here is my solution.
.design
background: #ea053a;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
height: 155px;
width: 155px;
.month
text-align:center;
padding: 1rem 0 .25rem 0;
color:#fff;
font-weight:bold;
font-size: 18px;
.day
text-align: center;
font-size: 60px;
font-weight:bold;
color: #fff;
<div class="design">
<div class="month">Diciembre</div>
<div class="day">29</div>
</div>edited Feb 6 at 9:44
Lelio Faieta
4,13852446
answered Feb 6 at 9:35
NoLimitsNoLimits
5619
4
there is no shadow and no gradient
– Temani Afif
Feb 6 at 9:42
add a comment |
3
You can use clip-path as I did. Here is my solution.
.design
background: #ea053a;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
height: 155px;
width: 155px;
.month
text-align:center;
padding: 1rem 0 .25rem 0;
color:#fff;
font-weight:bold;
font-size: 18px;
.day
text-align: center;
font-size: 60px;
font-weight:bold;
color: #fff;
<div class="design">
<div class="month">Diciembre</div>
<div class="day">29</div>
</div>edited Feb 6 at 9:44
Lelio Faieta
4,13852446
answered Feb 6 at 9:35
NoLimitsNoLimits
5619
4
there is no shadow and no gradient
– Temani Afif
Feb 6 at 9:42
add a comment |
3
3
3
You can use clip-path as I did. Here is my solution.
.design
background: #ea053a;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
height: 155px;
width: 155px;
.month
text-align:center;
padding: 1rem 0 .25rem 0;
color:#fff;
font-weight:bold;
font-size: 18px;
.day
text-align: center;
font-size: 60px;
font-weight:bold;
color: #fff;
<div class="design">
<div class="month">Diciembre</div>
<div class="day">29</div>
</div>edited Feb 6 at 9:44
Lelio Faieta
4,13852446
answered Feb 6 at 9:35
NoLimitsNoLimits
5619
You can use clip-path as I did. Here is my solution.
.design
background: #ea053a;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
height: 155px;
width: 155px;
.month
text-align:center;
padding: 1rem 0 .25rem 0;
color:#fff;
font-weight:bold;
font-size: 18px;
.day
text-align: center;
font-size: 60px;
font-weight:bold;
color: #fff;
<div class="design">
<div class="month">Diciembre</div>
<div class="day">29</div>
</div>.design
background: #ea053a;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
height: 155px;
width: 155px;
.month
text-align:center;
padding: 1rem 0 .25rem 0;
color:#fff;
font-weight:bold;
font-size: 18px;
.day
text-align: center;
font-size: 60px;
font-weight:bold;
color: #fff;
<div class="design">
<div class="month">Diciembre</div>
<div class="day">29</div>
</div>.design
background: #ea053a;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
height: 155px;
width: 155px;
.month
text-align:center;
padding: 1rem 0 .25rem 0;
color:#fff;
font-weight:bold;
font-size: 18px;
.day
text-align: center;
font-size: 60px;
font-weight:bold;
color: #fff;
<div class="design">
<div class="month">Diciembre</div>
<div class="day">29</div>
</div>edited Feb 6 at 9:44
Lelio Faieta
4,13852446
answered Feb 6 at 9:35
NoLimitsNoLimits
5619
edited Feb 6 at 9:44
Lelio Faieta
4,13852446
edited Feb 6 at 9:44
Lelio Faieta
4,13852446
edited Feb 6 at 9:44
Lelio Faieta
4,13852446
4,13852446
answered Feb 6 at 9:35
NoLimitsNoLimits
5619
answered Feb 6 at 9:35
NoLimitsNoLimits
5619
answered Feb 6 at 9:35
NoLimitsNoLimits
5619
5619
4
there is no shadow and no gradient
– Temani Afif
Feb 6 at 9:42
add a comment |
4
there is no shadow and no gradient
– Temani Afif
Feb 6 at 9:42
4
4
there is no shadow and no gradient
– Temani Afif
Feb 6 at 9:42
there is no shadow and no gradient
– Temani Afif
Feb 6 at 9:42
add a comment |
0
If you change your CSS to the following minor changes, then you can achieve the result that you have expected:
.design
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
.design:before
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
Here is the working of the above CSS:
.design
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
.design:before
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
<div class="design">
</div>Hope this was helpful.
My Fiddle
edited Feb 6 at 14:43
isherwood
37.3k1082111
answered Feb 6 at 10:00
Code_NinjaCode_Ninja
1,270728
add a comment |
0
If you change your CSS to the following minor changes, then you can achieve the result that you have expected:
.design
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
.design:before
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
Here is the working of the above CSS:
.design
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
.design:before
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
<div class="design">
</div>Hope this was helpful.
My Fiddle
edited Feb 6 at 14:43
isherwood
37.3k1082111
answered Feb 6 at 10:00
Code_NinjaCode_Ninja
1,270728
add a comment |
0
0
0
If you change your CSS to the following minor changes, then you can achieve the result that you have expected:
.design
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
.design:before
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
Here is the working of the above CSS:
.design
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
.design:before
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
<div class="design">
</div>Hope this was helpful.
My Fiddle
edited Feb 6 at 14:43
isherwood
37.3k1082111
answered Feb 6 at 10:00
Code_NinjaCode_Ninja
1,270728
If you change your CSS to the following minor changes, then you can achieve the result that you have expected:
.design
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
.design:before
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
Here is the working of the above CSS:
.design
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
.design:before
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
<div class="design">
</div>Hope this was helpful.
My Fiddle
.design
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
.design:before
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
<div class="design">
</div>.design
background: #ea053a;
display: inline-block;
height: 100px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 180px;
.design:before
border-top: 43px solid #ea053a;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
margin-right: 40px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0px;
margin-top: 100px;
width: 0;
<div class="design">
</div>edited Feb 6 at 14:43
isherwood
37.3k1082111
answered Feb 6 at 10:00
Code_NinjaCode_Ninja
1,270728
edited Feb 6 at 14:43
isherwood
37.3k1082111
edited Feb 6 at 14:43
isherwood
37.3k1082111
edited Feb 6 at 14:43
isherwood
37.3k1082111
37.3k1082111
answered Feb 6 at 10:00
Code_NinjaCode_Ninja
1,270728
answered Feb 6 at 10:00
Code_NinjaCode_Ninja
1,270728
answered Feb 6 at 10:00
Code_NinjaCode_Ninja
1,270728
1,270728
add a comment |
add a comment |
-1
Change to (only changed lines listed, keep everything else as-is):
.design:before
...
border-left: 114px solid transparent;
border-right: 114px solid transparent;
...
width: 0;
answered Feb 6 at 9:41
jvdmrjvdmr
52128
add a comment |
-1
Change to (only changed lines listed, keep everything else as-is):
.design:before
...
border-left: 114px solid transparent;
border-right: 114px solid transparent;
...
width: 0;
answered Feb 6 at 9:41
jvdmrjvdmr
52128
add a comment |
-1
-1
-1
Change to (only changed lines listed, keep everything else as-is):
.design:before
...
border-left: 114px solid transparent;
border-right: 114px solid transparent;
...
width: 0;
answered Feb 6 at 9:41
jvdmrjvdmr
52128
Change to (only changed lines listed, keep everything else as-is):
.design:before
...
border-left: 114px solid transparent;
border-right: 114px solid transparent;
...
width: 0;
answered Feb 6 at 9:41
jvdmrjvdmr
52128
answered Feb 6 at 9:41
jvdmrjvdmr
52128
answered Feb 6 at 9:41
jvdmrjvdmr
52128
answered Feb 6 at 9:41
jvdmrjvdmr
52128
52128
add a comment |
add a comment |
-1
Here is my solution to add shadow and gradient to the shape
.design
background: #ea053a;
display: inline-block;
height: 155px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 228px;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
.triangle
position: absolute;
height: 100px;
top: 155px;
width: 228px;
-webkit-clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
background-color: #ea053a;
transform: rotate(180deg);
<div class="design">
<div class="triangle">
</div>
</div>answered Feb 6 at 12:25
ChintanChintan
193
2
where is the shadow and the gradient?
– Temani Afif
Feb 6 at 13:51
can you please edit the post and update it in the answer, if it is possible, then it is a good solution
– Code_Ninja
Feb 7 at 5:28
add a comment |
-1
Here is my solution to add shadow and gradient to the shape
.design
background: #ea053a;
display: inline-block;
height: 155px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 228px;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
.triangle
position: absolute;
height: 100px;
top: 155px;
width: 228px;
-webkit-clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
background-color: #ea053a;
transform: rotate(180deg);
<div class="design">
<div class="triangle">
</div>
</div>answered Feb 6 at 12:25
ChintanChintan
193
2
where is the shadow and the gradient?
– Temani Afif
Feb 6 at 13:51
can you please edit the post and update it in the answer, if it is possible, then it is a good solution
– Code_Ninja
Feb 7 at 5:28
add a comment |
-1
-1
-1
Here is my solution to add shadow and gradient to the shape
.design
background: #ea053a;
display: inline-block;
height: 155px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 228px;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
.triangle
position: absolute;
height: 100px;
top: 155px;
width: 228px;
-webkit-clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
background-color: #ea053a;
transform: rotate(180deg);
<div class="design">
<div class="triangle">
</div>
</div>answered Feb 6 at 12:25
ChintanChintan
193
Here is my solution to add shadow and gradient to the shape
.design
background: #ea053a;
display: inline-block;
height: 155px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 228px;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
.triangle
position: absolute;
height: 100px;
top: 155px;
width: 228px;
-webkit-clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
background-color: #ea053a;
transform: rotate(180deg);
<div class="design">
<div class="triangle">
</div>
</div>.design
background: #ea053a;
display: inline-block;
height: 155px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 228px;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
.triangle
position: absolute;
height: 100px;
top: 155px;
width: 228px;
-webkit-clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
background-color: #ea053a;
transform: rotate(180deg);
<div class="design">
<div class="triangle">
</div>
</div>.design
background: #ea053a;
display: inline-block;
height: 155px;
margin-left: 33px;
margin-right: 40px;
position: relative;
width: 228px;
filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
.triangle
position: absolute;
height: 100px;
top: 155px;
width: 228px;
-webkit-clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
background-color: #ea053a;
transform: rotate(180deg);
<div class="design">
<div class="triangle">
</div>
</div>answered Feb 6 at 12:25
ChintanChintan
193
edited Feb 7 at 5:57
answered Feb 6 at 12:25
ChintanChintan
193
answered Feb 6 at 12:25
ChintanChintan
193
answered Feb 6 at 12:25
ChintanChintan
193
193
2
where is the shadow and the gradient?
– Temani Afif
Feb 6 at 13:51
can you please edit the post and update it in the answer, if it is possible, then it is a good solution
– Code_Ninja
Feb 7 at 5:28
add a comment |
2
where is the shadow and the gradient?
– Temani Afif
Feb 6 at 13:51
can you please edit the post and update it in the answer, if it is possible, then it is a good solution
– Code_Ninja
Feb 7 at 5:28
2
2
where is the shadow and the gradient?
– Temani Afif
Feb 6 at 13:51
where is the shadow and the gradient?
– Temani Afif
Feb 6 at 13:51
can you please edit the post and update it in the answer, if it is possible, then it is a good solution
– Code_Ninja
Feb 7 at 5:28
can you please edit the post and update it in the answer, if it is possible, then it is a good solution
– Code_Ninja
Feb 7 at 5:28
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54550209%2fhow-can-i-correctly-add-a-shadow-and-a-gradient-to-my-shape%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Just use a width of 0 for the
::before. jsfiddle.net/z3yj1m0p– Mr Lister
Feb 6 at 9:32