<html>
<header>
<title>div实现大括号边框</title>
<style>
.square_brackets {
border: none;
position: relative;
padding: 0;
height: 130px;
width: 400px;
}
.square_brackets:before,
.square_brackets:after {
content: '';
display: block;
height: 100%;
width: 15px;
border: 3px solid #979797;
position: absolute;
top: -2px;
}
.square_brackets:before {
left: 0;
border-right: 0;
}
.square_brackets:after {
right: 0;
border-left: 0;
}
.triangle {
width: 0;
height: 0;
border: 10px solid;
border-color: transparent #979797 transparent transparent;
position: absolute;
left: -17px;
top: 50px;
}
.child {
padding: 20px;
}
</style>
</header>
<body>
<div class="square_brackets">
<div class="triangle"></div>
<div class="child">显示内容1</div>
<div class="child">显示内容2</div>
</div>
</body>
</html>
- 1
- 2
前往页