中心三角底部Div与盒子阴影

问题描述：

我有一个光滑的盒子阴影有一个使用“边框技巧”（取自this *问题）创建的三角形的div。我想在三角形上也有箱形阴影。由于它是用边界制作的，所以这可能是不可能的，但是你是否知道这个问题的其他方法/相对优雅的解决方法？中心三角底部Div与盒子阴影

下面的代码片段是我的代码的当前版本，没有三角阴影。

.hero { 
 
    z-index: 1; 
 
    text-align: center; 
 
    padding-top: 6%; 
 
    position: relative; 
 
    background-color: red; 
 
    height: 320px !important; 
 
    width: 100% !important; 
 
    box-shadow: 0px 3px 4px green; 
 
} 
 

 
.hero:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -50px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: solid 50px red; 
 
    border-left: solid 50px transparent; 
 
    border-right: solid 50px transparent; 
 
}

<div class="hero"></div>

在此先感谢;）

Picture of the Layout right now, with the missing shadow around the triangle

https://codepen.io/ryanmcnz/pen/JDLhu – CBroe

谢谢，这对我有用。但是，当我调整窗口的大小时，大格子的盒子阴影有时会在三角形中画出一条直线，任何想法如何解决这个问题？ –

不知道这是否只是由Chrome f12“响应式”工具引起的，因为手动调整窗口大小时不会发生这种情况 –

答

你可以尝试“变换旋转”伎俩，如表现在下面的代码片段。

.hero { 
 
    z-index: 9; 
 
    text-align: center; 
 
    padding-top: 6%; 
 
    position: relative; 
 
    background-color: red; 
 
    height: 320px !important; 
 
    width: 100% !important; 
 
    box-shadow: 0px 3px 4px green; 
 
} 
 

 
.hero:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: -25px; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
    transform: rotate(135deg); 
 
    box-shadow: 0px -3px 4px green; 
 
} 
 

 
.hero-clip { 
 
    position: absolute; 
 
    bottom: 0; 
 
    background: inherit; 
 
    height: 35px; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 9; 
 
}

<div class="hero"> 
 
    <div class="hero-clip"></div> 
 
</div>

答

这是一个有点kludgey变通方法，但我的做法是重叠的正方形的DIV，旋转45度，正如我在小提琴那样：

https://jsfiddle.net/needsmorejson/wgxp1tcp/

HTML：

<div class="hero"> 
    <div class="sidekick"> 
    </div> 
</div>

CSS：

.hero { 
    z-index: 1; 
    text-align: center; 
    padding-top: 6%; 
    position: relative; 
    background-color: red; 
    height: 320px !important; 
    width: 100% !important; 
    box-shadow: 0px 3px 4px green; 
} 
.sidekick{ 
    width:71px !important; 
    height:71px !important; 
    z-index: 1; 
    text-align: center; 
    position: absolute; 
    top: 333px; 
    left: 50%; 
    padding-top: -25px !important; 
    margin-top -25px !important; 
    margin-left: auto; 
    margin-right: auto; 
    transform: rotate(-45deg); 
    background-color: red; 
    border-top: solid 0px transparent; 
    border-right: solid 0px transparent; 
    box-shadow: -3px 3px 4px green; 
}

但值得注意的是，我的“三角形”不太适中居中。

中心三角底部Div与盒子阴影

相关推荐