如何减小css创建的三角形的宽度和高度
如何减小css创建的三角形的宽度和高度
提问于 2020-05-17 14:22:23
我正在创建一个三角形指向底部使用html和css。这里我需要减少顶部的宽度和增加一点向下指针的高度，我尝试了很多修改，它不起作用。
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
bottom: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
}
.triangle-with-shadow:hover, .triangle-with-shadow:hover:after {
box-shadow: none;
}<div class="triangle-with-shadow"></div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-17 15:06:51
在CSS中，所有内容都被视为矩形(BOX-MODEL)。这很烦人，但是很有意义，如果你试图在矩形布局上应用box-shadow，这是一项非常繁重的任务。因此，在使用过滤器时，您可以使用box-shadow drop-shadow。过滤器不绑定到盒子模型。这意味着我们的三角形的轮廓被识别出来，并且它周围的透明度被忽略，以便预期的形状接收阴影。
尝试以下代码：
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.triangle-with-shadow:after {
content: "";
position: absolute;
border-style: solid;
border-width: 40px 20px 0 20px;
border-color: #999 transparent transparent transparent;
-webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.5));
}
.triangle-with-shadow:hover,
.triangle-with-shadow:hover:after {
box-shadow: none;
}<div class="triangle-with-shadow"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61847784
复制相关文章
相似问题
腾讯云开发者
