css三角形,伪类,阴影

css三角形,伪类,阴影

效果图

html+css

 <div class="box"></div>
 
.box{
    position: relative;
    width: 150px;
    height: 150px;
    background-color: white;
    border: 1px solid #e5e5e5;
    box-shadow: 1px 1px 10px rgba(15, 40, 78, 0.25);
    &:after {
        content: '';
        position: absolute;
        display: inline-block;
        top: -2px;
        left: 50%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px;
        border-color: #fff #fff transparent transparent;
        transform: rotate(314deg) translateY(-50%);
        box-shadow: 1px -1px 2px rgba(15, 40, 78, 0.25);
    }
}

三角形

效果样式

width: 10px;
height: 10px;
border-right:1px solid #000;
border-bottom:1px solid #000;
transform: rotate(45deg);
transition: all .2s;（动画过渡效果）

鼠标经过三角旋转

transform: rotate(225deg);