如何减小由CSS创建的三角形的宽度并增加其高度

我正在创建一个三角形,它使用html和css指向底部。在这里,我需要减小顶部宽度并稍微增加向下指针的高度,我尝试了很多修改,但没有用。这是下面的代码

html

<div class="triangle-with-shadow"></div>

的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;
}
评论