1. Rendering
2. Difficulties and ideas
Difficulty : The small triangle with a border above is not easy to implement
Idea : Draw two divs of different sizes so that they basically overlap (two sizes are different, not completely overlapping, let the red one show a little edge), let the white div be placed topmost (set z-index)
3. Code implementation
<p class="pSanStyle"><p class="pSanStyleInner"></p></p>
<div class="divStyle">
<p style="padding: 10px 0 0 10px; font-weight: bold">项目</p>
<hr style="width: 240px" />
<a-row>
<a-col :span="7" style="border-right: 1px solid black; margin: 5px 0 5px 5px; padding-right: 5px"
>项目名称</a-col
>
<a-col :span="7" style="border-right: 1px solid black; margin: 5px 0 5px 5px; padding-right: 5px"
>项目名称</a-col
>
<a-col :span="7" style="margin: 5px 0 5px 5px">项目名称</a-col>
</a-row>
</div>
.pSanStyle {
width: 0;
height: 0;
position: relative;
border: 10px solid transparent;
border-color: transparent transparent red transparent ;
margin-left: 50px;
}
.pSanStyleInner{
width: 0;
height: 0;
border: 12px solid transparent;
border-color: transparent transparent white transparent ;
position: absolute;
margin-left: -11.5px;
margin-top: -10px;
z-index: 21;
}
.divStyle {
position: absolute;
width: 260px;
height: 150px;
margin-top: 20px;
background-color: white;
padding: 10px;
border: 1px solid red;
}