带有阴影的三角形使用css [英] triangle with shadow using css

问题描述

CSS

 。尖括号
 {
 display：inline-block; 
宽度：0； 
高度：0； 
 vertical-align：top; 
内容：； 
 border-top：9px实心#FFFFFF; 
 border-right：7像素纯色透明； 
 border-left：7像素纯色透明； 
 margin-top：13px; 
 margin-left：4px; 
} 
  

HTML代码

 < div class =插入符号左< / div 
  

我需要像3D效果一样为该三角形提供阴影底面。

解决方案

  .triangle {width：100px;高度：100px；职位：相对溢出：隐藏； box-shadow：0 16px 10px -17px rgba（0，0，0，0.5）;}。triangle：after {content：;位置：绝对；宽度：50像素；高度：50px；背景：＃999； -webkit-transform：旋转（45deg）;顶部：75px；左：25px； box-shadow：-1px -1px 10px -2px rgba（0，0，0，0.5）;}  

 < div class = triangle>< / div>  

p>

演示

http://jsfiddle.net/w9Zgc/

CSS

.caret-bottom
{
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align:top;
    content: "";
    border-top: 9px solid #FFFFFF;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent; 
    margin-top: 13px;
    margin-left: 4px;   
  }

HTML CODE

<div class="caret-left"></div>

I need shadow bottom side for this triangle like a 3D effect.

解决方案

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

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

DEMO

http://jsfiddle.net/w9Zgc/

这篇关于带有阴影的三角形使用css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！