#box{
position:absolute;
/* 定位改变位置 */
top:0;
left:10;
right:0;
bottom:30;
width:40px;
height:30px;
/* 设置宽高 */
margin:auto;
background-color: red;
border-radius: 0 5px;
/* 设置边框圆角 */
}
#box::before{
content:"";
/* 设置一个虚拟的,不占空间的块 */
position:absolute;
left:50%;
top:0;
/* 设置位置为box的竖线 */
width:2px;
height:45%;
/* 设置宽高 */
margin-left:-1px;
margin-top: 8px;
/* 调整位置 */
background-color:white;
}
#box::after{
content:"";
/* 设置一个虚拟的,不占空间的块 */
position:absolute;
left:0;
top:40%;
/* 设置位置为box的横线 */
width:33%;
height:2px;
/* 设置宽高 */
margin-top:2px;
margin-left:13px;
/* 调整位置 */
background-color:white;
}
这是css部分代码
<div id="box"></div>
这是html部分代码
右上角就是完成图
就是利用:after和:before来完成