border bottom
- .box-container {
- position: relative;
- width: 90%;
- color: #777;
- }
- .border-top {
- background: #b4bcbf;
- padding: 15px;
- }
- .border-top:before {
- content: '';
- position: absolute;
- left: 42%;
- top: 0;
- bottom: auto;
- right: auto;
- height: 7px;
- width: 50%;
- background-color: #8796a9;
- }
- .border-left {
- background: #dfdad6;
- padding: 15px;
- }
- .border-left:before {
- content: '';
- position: absolute;
- left: 0;
- top: 6%;
- bottom: auto;
- right: auto;
- height: 52%;
- width: 5px;
- background-color: #a89d9e;
- }
- .border-right {
- background: #eee9c4;
- padding: 15px;
- }
- .border-right:after {
- content: '';
- position: absolute;
- left: auto;
- top: auto;
- bottom: 5px;
- right: 0;
- height: 52%;
- width: 5px;
- background-color: #f39c81;
- }
- .border-bottom {
- background: #bcdc9d;
- padding: 15px;
- }
- .border-bottom:after {
- content: '';
- position: absolute;
- left: 18px;
- top: auto;
- bottom: 0;
- right: auto;
- height: 6px;
- width: 105px;
- background-color: #32b66b;
- }
效果如下图:
来源: http://www.2cto.com/kf/201705/636877.html