css三角形写法

 

准备好html代码

<div class="c-tit" style="display: flex;">

   <div>采购方/Party A</div>

   <div class="marks"></div>

<div style="background: #f0f0f0"></div></div>

 

给marks添加样式

width: 0px;
height: 0px;
border-top: 12px solid transparent;
border-right: 24px solid #f0f0f0;
border-bottom: 12px solid transparent;

呈现结果

技术关键点

主要在样式部分：

在marks的div中

border-top: 12px solid transparent;顶部边框宽度12px,  solid  ,transparent背景透明

知道border-top这个样式的属性设置后，剩下的不难得出想要的结果