CODEWITHSUNDEEP
htmlcss
Shawn
Shawn

Reputation: 3159

CSS triangle with inset shadow

I've made a "triangle" using CSS using the code outlined HERE

(jsFiddle example)

It works great, but I would like to have an inset shadow on the triangle and bar like this:

enter image description here

How?

HTML:

<div id="wrapper">
    <div class="triLeft"></div>
    <div class="triAngle"></div>
</div>

CSS:

.triLeft{
  width:40px;
  background:#fff;
  margin:0;
  float:left;
  height:200px;
}

.triAngle{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 45px 0 45px 40px;
  border-color: transparent transparent transparent #ffffff;                  
  float:left;
  margin-top:20px;
}               

#wrapper{
  height:200px;
  background:brown;
}

Upvotes: 0

Views: 1157

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106038

you could try it another way, without borders but transform:rotate();

http://codepen.io/anon/pen/MymQMK

div.trgl {
  position:relative;
  margin:2em;
  overflow:hidden;
}
div.trgl:after {
  content:'';
  position:absolute;
  height:40px;
  width:40px;
  top:2em;
  left:-20px;
  background:white;
  box-shadow: inset 0 0 5px black ;
  transform:rotate(45deg);
}
div.trgl div{
  position:relative;
  min-height:200px;
  padding:1em;
  box-shadow: 0 0 5px black;
  margin:3px;
  background:lightgray;
}
<div class="trgl">
  <div>
  </div>
</div>

Upvotes: 2

Related Questions