css 中的转角设计

Question

我有这张图片，我想知道如何获得这个设计。如何设计CSS和html中的高亮边框。

Answer 1

使用几个伪元素并创建带有边框的三角形，然后将它们绝对定位到您想要的位置。

示例

div{
    background:#999;
    height:300px;
    position:relative;
    width:100px;
}
div::before,div::after{
    content:"";
    left:100px;
    position:absolute;
}
div::before{
    border-bottom:20px solid #333;
 border-right:20px solid transparent;
    top:0;
}
div::after{
    border-top:20px solid #333;
 border-right:20px solid transparent;
    bottom:0;
}

<div></div>

css 中的转角设计

Corner design in css

html

css

css-shapes