css 画多边形、不规则边框

最新推荐文章于 2024-08-26 21:37:02 发布

付月半子

最新推荐文章于 2024-08-26 21:37:02 发布

阅读量1.5w

点赞数 8

分类专栏： css

本文链接：https://blog.csdn.net/qq_34169240/article/details/95342948

版权

css 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

1.画梯形：

width: 200px;
height: 0px;
border-top: 0px;
border-bottom: 70px solid #1E6AA4;
border-right: 50px solid transparent;
border-left: 50px solid transparent;

2.画三角形：

width: 0px;
height: 0px;
border-color: #014F83 transparent;
border-width: 0px 56px 56px 00px;
border-style: solid;

3.不规则边框(用clip-path截图)

如：

.bkml-bottom{
   width:50%;
height:50%;
background: #58a;

clip-path:
polygon(0 0, 100% 0%,100% 100%,
   70px 100%, 0 calc(100% - 70px));

}

效果图：

效果图汇总：

<html>
<head>
	 <meta charset="UTF-8">
    <title>main</title>
    <style>
    
    
.mcontainer-top{
	width: 100%;
    height:70px;
    box-sizing: border-box;
    color:#fff;
    position: relative;
}
.m-top-center{
	height: 100%;
	width: 27%;
	margin-left: 37%;
	float: left;
	position: relative;
}
 
.m-top-center-tixing{
	float: left;
	width: calc(100% - 140px);
    height: 0px;
    border-top: 0px;
    border-bottom: 70px solid #1E6AA4;
    border-right: 50px solid transparent;
	border-left: 50px solid transparent;
	text-align: center;
	line-height: 70px;
	font-size: 48px;
	font-weight: bold; 
	
}	
.mcontainer-middle{
	width:calc(100% - 4px);
    height:calc(100% - 94px);
    position: relative;
}
  .bkml-top{
	
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    clip-path:
        polygon(
            0 0, calc(100% - 45px) 0, 100% 48px,
            100% calc(100%), calc(100%) 100%,
            45px 100%, 0 calc(100% - 45px), 0 45px
        );
 
 
}
  
.bkml-bottom{
	width:100%;
    height:100%;
    background: #1E6AA4;
    
    -webkit-clip-path:
        polygon(0 0, calc(100% - 250px) 0%,  calc(100% - 250px) 4px,  
            4px 4px, 4px calc(100% - 70px), 70px calc(100% - 4px),
	         calc(100% - 4px) calc(100% - 4px),  calc(100% - 4px)  4px , 
	         calc(100% - 100px) 4px, calc(100% - 100px) 0%,100% 0%, 
	         100% 100%,
	         70px 100%, 0 calc(100% - 70px));
    clip-path:
          polygon(0 0, calc(100% - 250px) 0%,  calc(100% - 250px) 4px,  
            4px 4px, 4px calc(100% - 70px), 70px calc(100% - 4px),
	         calc(100% - 4px) calc(100% - 4px),  calc(100% - 4px)  4px , 
	         calc(100% - 100px) 4px, calc(100% - 100px) 0%,100% 0%, 
	         100% 100%,
	         70px 100%, 0 calc(100% - 70px));
            
}
/* 左下角  直角三角形 */
.bkml-leftBottom{
	position: absolute;
	width: 0px;
	height: 0px;
    
    bottom: 0px;
    left: 0px;
     
    border-color: #014F83 transparent;
    border-width: 0px 56px 56px 00px;
    border-style: solid;
 
}
    </style>
</head>
<body>
	<div class="mcontainer-top">
    	<div class="m-top-center">
    		<div class="m-top-center-tixing">这是个梯形</div>
    	</div>
    </div>
   <div class="mcontainer-middle ">
        <div class="bkml-bottom"><!-- 边框，内部不能有内容 --></div> 
        <div class="bkml-top"> <!--内容写在这个div中-->
        	hello
        </div>
        <div class="bkml-leftBottom"><!-- 左下角  直角三角形 --></div>
   </div
        
</body>
</html>

4.平行四边形、梯形

<html>
<head>
<meta charset="utf-8">
<title>popup</title>
<script src="js/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<style type="text/css">
 /*梯形*/
 .rdda-div-tixing{
	float: left;
	width: 155px;
    height: 0px;
    border-top: 0px;
    border-bottom: 60px solid #155681;
    border-right: 60px solid transparent;
	border-left: 60px solid transparent;
	text-align: center;
	line-height: 60px;
	
}
.rdda-div-tixing div{
	font-size: 38px;
	color: #fff;  
}

/*平行四边形r*/
.rdda-div-sibianxing-right{
    float: left;
    width: 185px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #01385F;
    text-decoration: none;
    transform: skewX(45deg);
}
.rdda-div-sibianxing-right div{
    transform: skewX(-45deg);
    font-size: 30px;
	color: #2488C8; 
}
/*平行四边形l*/
.rdda-div-sibianxing-left{
    float: left;
    width: 185px;
    height: 60px;
    margin-left: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #01385F;
    text-decoration: none;
    transform: skewX(-45deg);
}
.rdda-div-sibianxing-left div{
    transform: skewX(45deg);
    font-size: 30px;
	color: #2488C8; 
}
</style> 
<body> 
	<div>
		 <div class="rdda-div-sibianxing-left">
	        <div>平行四边形l</div>
	     </div>
		 <div class="rdda-div-tixing">
	        <div>我是梯形</div>
	     </div>
		 <div class="rdda-div-sibianxing-right">
	        <div>平行四边形r</div>
	     </div>
    </div>
</body>
</html>