箱子阴影转为使用css创建的三角形

我有以下plunker，我使用CSS创建了一个三角形。箱子阴影转为使用css创建的三角形

CSS：

.triangle { 
    border: inset 6px; 
    content: ""; 
    display: block; 
    height: 0; 
    width: 0; 
    border-color: transparent transparent red transparent; 
    border-bottom-style: solid; 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    z-index: 89; 
}

HTML：

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

在我AngularJS项目，当我把一个下拉指令定义here.

问题是创建这个三角形是我想给这个三角形和下拉popu p箱阴影。我可以将它应用于弹出窗口（实质上只是一个'ul'列表），但我正在与三角形挣扎。我如何将盒子阴影应用于三角形？

来源

2015-10-19 Tarun Dugar

的可能的复制[-webkit滤波器：下拉阴影其他浏览器（http://stackoverflow.com/questions/21133763/webkit-filter-drop-shadow-for - 其他浏览器） – Pete

请通过接受答案或评论他们来澄清为什么你还没有接受任何答案，请跟进你的问题。 – klaar

.triangle { 
 
    position: relative; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
    background: red; 
 
    box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4); 
 
} 
 
.triangle::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    width: 0; 
 
    height: 0; 
 
    box-sizing: border-box; 
 
    border: 6px solid black; 
 
    border-color: transparent transparent red red; 
 
    transform-origin: 0 0; 
 
    transform: rotate(-45deg); 
 
    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

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

 
</html>

这里是HTML和CSS创建所需的效果。

来源

2015-10-19 08:20:57 Enkode

不错的工作，使用循环来破解当前CSS的局限性。 Kuddos！ – klaar

@Tarun我提供了一个很好的答案，它是你正在寻找的解决方案？ – Enkode

对不起，迟到的回应，它工作正常。 –

-1

由于三角形实际上是一种黑客（块元素的四个边框中的三个是透明的），因此box-shadow属性将无法按预期工作，因为它仍然会看到您应用此“黑客”作为矩形，所以相应地应用了箱形阴影。

结果在this fiddle。

.triangle:before { 
 
    border: inset 6px; 
 
    content: ""; 
 
    display: block; 
 
    height: 0; 
 
    width: 0; 
 
    border-color: transparent transparent red transparent; 
 
    border-bottom-style: solid; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    z-index: 89; 
 
    box-shadow: 0px 0px 2px 2px #AAA; 
 
}

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

来源

2015-10-19 08:21:24 klaar

箱子阴影转为使用css创建的三角形

回答

相关问题