/    Sign up×
Community /Pin to ProfileBookmark

How to set shadow when using triangle as CSS?

Copy linkTweet thisAlerts:
Dec 10.2015

[code=php]
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 200px 200px;
border-color: transparent transparent #007bff
[/code]

Shadow is based from the bottom left hand side till the top right hand side.
I have set CSS as triangle. how to set shadow in this case in the correct way?
Need help.

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulDec 10.2015 — Hi,

I do not understand what you mean by *[i]I have set CSS as triangle[/i]"? Please give your code...
Copy linkTweet thisAlerts:
@ZectassoneDec 28.2015 — You can use this tag - box-shadow: 10px 10px 5px #888888

its use for set shadow around our shapes.
Copy linkTweet thisAlerts:
@cootheadDec 28.2015 — Hi there toplisek,

[indent]

if you want something more versatile, then I would suggest

that you consider using the [color=navy][i]"svg element"[/i][/color].

Here is a very basic example...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<style media="screen">
body {
background-color:#f0f0f0;
}
svg {
height:201px;
width:201px;
box-shadow:5px 5px 5px #666;
}
polygon {
fill:#007bff;
stroke:#000;
stroke-width:2;
}
text {
fill:#fff;
font-size:120%;
text-shadow:0 0 1px #000,0 0 2px #000;
}
</style>

</head>
<body>

<svg>
<polygon points="200,0 200,200 0,200"></polygon>
<text x="136" y="110">I</text>
<text x="90" y="140">really love</text>
<text x="92" y="170">Triangles</text>
</svg>

</body>
</html>[/color]

If you do some research you find that the [color=navy][i]"svg element"[/i][/color]

is a great deal more versatile than my simple example. ?

[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@kite123Dec 31.2015 — Hey,try this:

HTML

<div class="triangle"></div>

CSS

.triangle {

width: 100px;

height: 100px;

position: relative;

overflow: hidden;

box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);

}

.triangle:after {

content: "";

position: absolute;

width: 50px;

height: 50px;

background: #999;

-webkit-transform: rotate(45deg);

top: 75px;

left: 25px;

box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);

}
Copy linkTweet thisAlerts:
@cootheadDec 31.2015 — Hi there kite123,

[indent]

don't you know what a triangle is or looks like? ?

[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@w3webJan 09.2016 — hi toplisek[COLOR=#3E3E3E] ,



[/COLOR]Please try this code


<html>

<head>

<style>

.triangle-with-shadow {

width: 100px;

height: 100px;

position: relative;

overflow: hidden;

box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);

}

.triangle-with-shadow:after {

content: "";

position: absolute;

width: 50px;

height: 50px;

background: #999;

transform: rotate(45deg);

top: 75px;

left: 25px;

box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);

}

.triangle-with-shadow:hover, .triangle-with-shadow:hover:after {

box-shadow: none;

}

</style>

</head>

<body>

<div class="triangle-with-shadow"></div>

</body>

</html>
Copy linkTweet thisAlerts:
@Vinod_Kumar2Jan 18.2016 — try this code

....

.triangle {

color: #BADA55;

text-shadow: 0 0 20px black;

}
×

Success!

Help @toplisek spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...