边长小于div宽度？

Question

我有以下代码div {   width:200px;   border-bottom:1px solid magenta;   height:50px;   }DEMOdiv宽度为200px，因此border-bottom也是200px但是如果我想边框底部只有100px而不改变div宽度该怎么办？

Answer 1

您可以使用线性渐变：

div {

    width:100px;

    height:50px;

    display:block;

    background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);

background-position: bottom;

background-size: 100% 25px;

background-repeat: no-repeat;

    border-bottom: 1px solid #000;

    border-top: 1px solid red;

}

<div></div>