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

最新推荐文章于 2025-02-17 08:00:26 发布

原创最新推荐文章于 2025-02-17 08:00:26 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

这篇博客探讨了如何使用CSS来创建特殊的图形，如全局标签的悬挂标签效果，以及三角形和菱形的实现。通过设置不同的边框宽度、颜色和transform属性，详细展示了如何利用伪元素和定位技巧来构造这些几何形状。

  .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>