CSS的三角形阴影

Question

是否可以使用和CSS来实现这种三角形阴影设计？

Answer 1

You should give a try to the CSS Triangle generator

If you want more information Here are really nice explanations from CSS Tricks

#triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

Answer 2

You can use multiple background and gradient:

.box {
  padding:10px 20px 10px 50px;
  display:inline-block;
  font-size:30px;
  color:#fff;
  background:
    linear-gradient(blue,blue) right/calc(100% - 30px) 100%,
    linear-gradient(to bottom right,transparent 49.8%,grey 50%) left/30px 100%;
  background-repeat:no-repeat;
}

<div class="box"> text</div>

Answer 3

This will do your work and will work in most of the browsers.

.triangle {
  padding:10px 20px 10px 50px;
  display:inline-block;
  font-size:30px;
  color:#fff;
  background:
    linear-gradient(#1e1e72,#1e1e72) right/calc(100% - 30px) 100%,
    linear-gradient(to bottom right,transparent 49.8%,grey 50%) left/30px 100%;
    -moz-linear-gradient(#1e1e72,#1e1e72) right/calc(100% - 30px) 100%,
    linear-gradient(to bottom right,transparent 49.8%,grey 50%) left/30px 100%;
    -webkit-linear-gradient(#1e1e72,#1e1e72) right/calc(100% - 30px) 100%,
    linear-gradient(to bottom right,transparent 49.8%,grey 50%) left/30px 100%;
    -op-linear-gradient(#1e1e72,#1e1e72) right/calc(100% - 30px) 100%,
    linear-gradient(to bottom right,transparent 49.8%,grey 50%) left/30px 100%;
  background-repeat:no-repeat;
}

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

Answer 4

try adding a drop shadow filter to the css for the box

 filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));