我有以下 plunker我在其中使用 CSS 创建了一个三 Angular 形。
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 元素中，这个三 Angular 形是在我调用定义为 here. 的下拉指令时创建的
问题是我想给这个三 Angular 形和下拉弹出框一个框阴影。我可以将它应用到弹出窗口(本质上只是一个“ul”列表)，但我正在努力处理三 Angular 形。如何将框阴影应用到三 Angular 形？
最佳答案
.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。
关于html - 使用 css 创建三 Angular 形的框阴影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33209370/