角设计在css [英] Corner design in css

问题描述

我有这个形象，我想知道如何得到这个设计。如何在CSS和HTML中设计突出显示的边框。

I have this image and I am wondering how to get this design. How to design the highlighted borders in CSS and html.

>

推荐答案

使用几个伪元素，创建带边框的三角形，然后将它们绝对放在你想要的位置。

Use a couple of pseudo elements and create triangles with their borders then position them absolutely to sit where you want.

有关伪元素的更多信息

示例

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！