用css实线左边竖条

只给一个div标签，实现下图所示的左边竖条

左边竖条

方法很简单，直接贴代码。
法一(border)：

div {
    position: relative;
    box-sizing: border-box;
    background-color: lightgrey;
    border-left: 5px solid deeppink;
    width: 100px;
    height: 60px;
    left: 100px;
    top: 100px;
}

法二(伪元素)：

div {
    width: 100px;
    height: 60px;
    background-color: lightgrey;
    position: relative;
}

div::before {
    content: "";
    width: 5px;
    height: 60px;
    background: deeppink;
    position: absolute;
}

法三(box-shadow)：

div{
    box-shadow:-5px 0px deeppink;/*box-shadow: h-shadow v-shadow blur spread color inset;*/
}

div{
    box-shadow:5px 0px deeppink inset;
}

法四(drop-shadow)：

div {
    filter: drop-shadow(-5px 0 deeppink); /*filter: drop-shadow(x偏移 y偏移 模糊大小 色值);*/
}

完。~