css不规则标签 菱形 三角符号

  .global-lozenge-label{
	   position: absolute;
	       padding: 0 5px;
	       display: flex;
	       align-items: center;
		   width:15%;
	       height: 26px;
	       color: #fff;
		    background-color: #2058CF;
   }
   .global-lozenge-label::before{
     content: "";
       position: absolute;
       right: 100%; 
       top: 0;
       border-color: #2058CF #2058CF #2058CF transparent;
       border-width:13px 0px 13px  13px;
       border-style: solid;
   }
   .global-lozenge-label::after{
     content: "";
     position: absolute;
     left: 100%; 
     top: 0;
     border-color:transparent transparent transparent #2058CF;
     border-width: 13px 0 13px  13px ;
     border-style: solid;   
   }
<div class="global-lozenge-label"></div>

//三角符号
 .global-lozenge-after {
     content: "";
     height: 20px;
     width: 20px;
     border-width: 1px 1px 0 0;
     border-color: #00BAFF;
     border-style: solid;
     transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
     position: relative;
	 transform: rotate(45deg); 
   }
   <div class="global-lozenge-after"></div>

```cpp
//菱形
.global-lozenge{
   	width: 18px;
   	height: 18px;
   	background: rgb(255, 238, 46) none repeat scroll 0% 0%;
   	-moz-transform: rotate(45deg);
   	-webkit-transform: rotate(45deg);
   	-o-transform: rotate(45deg);
   	-ms-transform: rotate(45deg);
   	transform: rotate(45deg); 
   }
   .global-lozenge::before{
	   position: relative;
	   top:0;
	   left:0;
	   margin-top:-5px;
	   margin-left:-5px;
	   content: '';
	   display: inline-block;
	   width: 28px;
	   height:28px;
	   border:1px solid #21466C;
   }
   <div class="global-lozenge"></div>