CODEWITHSUNDEEP
htmlcss
ketan khandagale
ketan khandagale

Reputation: 461

Creating shadow for triangular div

How can we create shadow for triangular div? Here's a code which I was trying

Html

 <div id="triangle-down"></div>

CSS

 #triangle-down {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 100px solid red;
     box-shadow: 1px 1px 5px #000;
 }

This code creates the square shadow for the div tag. Now how can we create triangular shadow for this div tag ?

Upvotes: 2

Views: 484

Answers (2)

Josh Powell
Josh Powell

Reputation: 6297

Another option, most definitely better in ways, is using the filter: drop-shadow();.

This will mimic the shape to make a filter and I'm not kidding it mimics it to a tee. This will not only follow the object but it will also follow pseudo elements on the object.

Here is the CSS:

#triangle-down {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 100px solid red;
     filter: drop-shadow(0 5px 10px black);
     -webkit-filter: drop-shadow(0 5px 10px black);
     -moz-filter: drop-shadow(0 5px 10px black);
     -o-filter: drop-shadow(0 5px 10px black);
     -ms-filter: drop-shadow(0 5px 10px black);
}

Regular question Fiddle.

With pseudo elements Fiddle

#triangle-down {
    width: 300px;
    height: 200px;
    background: red;
    position: relative;
    filter: drop-shadow(0 5px 10px black);
     -webkit-filter: drop-shadow(0 5px 10px black);
     -moz-filter: drop-shadow(0 5px 10px black);
     -o-filter: drop-shadow(0 5px 10px black);
     -ms-filter: drop-shadow(0 5px 10px black);
} 

#triangle-down:before {
    content: "";
     width: 0;
     height: 0;
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
     border-top: 30px solid red;
     position: absolute;
     top: 100%;
     left: 50%;
 }

Filter information

Major consideration is browser support, currently Webkit is the only supported browser.

Upvotes: 0

Susheel Singh
Susheel Singh

Reputation: 3854

Method 1

HTML

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

CSS

.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;
}


Method 2

HTML

<span class="triangle">▼</span>

CSS

.triangle {
    color:red;
    font-size:100px;
    text-shadow: 0 0px 10px black;
}

Upvotes: 2

Related Questions