如何减小css创建的三角形的宽度和高度
如何减小css创建的三角形的宽度和高度
提问于 2020-05-17 06: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 07: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
复制相关文章
点击加载更多
相似问题
减小ImageSpan的高度和宽度
减小轮播引导的高度和宽度
减小BlackBerry BasicEditField的高度和宽度
使用CSS减小某个类的任何元素的宽度和高度
减小宽度时减小图像高度
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
