css三角形运用

逃离我推掉我的手 2022-04-10 07:14 185阅读 0赞

一个简单的三角形运用页面

原理就是宽高为0，设置边框就是三角形了，

然后加点定位到自己想要的地方。

.sjx{
    				margin: auto;
    				width: 0;
    				height: 0;
    			    border:10px solid transparent;
    				border-top: 10px solid #000000;
    				position: relative;
    				top: 20%;
    			}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70][]

如果要还角度，再次改变border的top bottom left  和right就可以了，颜色也可以直接换

进阶三角形：

可以用js 改变class br bc  tr tc 来改变颜色用于显示正序还是倒序。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 1][]

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
    		<link href="../css/mui.min.css" rel="stylesheet" />
    		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
    		<style type="text/css">
    			
    			.mui-content{
    				background-color: #F2F2F2;
    			}
    			
    			.content{
    				width: 100%;
    				background-color: #F2F2F2;
    				padding: 10px;
    			}
    			.search{
    				display: flex;
    				justify-content: center;
    				align-content: center;
    				padding: 10px;
    				background-color: white;
    			}
    			.stext{
    				width: 25%;
    				text-align: center;
    				display: flex;
    				justify-content: center;
    				align-items: center;
    				border-right:1px solid #C7C7CC;
    			}
    			.simg{
    				width: 30px;
    				height: 30px;
    			}
    			.simg>img{
    				width: 100%;
    				height: 100%;
    			}
    			.ssdiv{
    				width: 75%;
    			}
    			.ssinp{
    				width: 100%;
    				height: 100%;
    				border: 0;
    				padding-left: 10px;
    			}
    			::-webkit-input-placeholder{
    				font-size: 0.8em;
    				color: #999999;
    			} 
    			.sjx{
    				margin: auto;
    				width: 0;
    				height: 0;
    			    border:10px solid transparent;
    				border-top: 10px solid #000000;
    				position: relative;
    				top: 20%;
    			}
    			
    			.sj{
    			  display: flex;
    			  flex-direction: column;
    			  align-items: center;
    			  justify-content: space-between;
    			 z-index: 9;
    			}
    
    .tc{
       display: inline-block;
        position: relative;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: #CBCCCC;
        margin: 5px;
    }
    .tr{
       display: inline-block;
        position: relative;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: red;
        margin: 5px;
    }
    .bc{
       display: inline-block;
        position: relative;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-bottom-color: #CBCCCC;
        margin: 5px;
    }
    .br{
       display: inline-block;
        position: relative;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-bottom-color:  red;
        margin: 5px;
    }
    		</style>
    	</head>
    
    	<body>
    		
    		<header class="mui-bar mui-bar-nav hbg">
    		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
    		    <h1 class="mui-title">挂单列表</h1>
    		</header>
    		<div class="mui-content">
    		    <div class="content">
    		    	<div class="search">
    		    		<div class="stext">
    		    			单据号
    		    			<div class="sjx">
    		    			</div>
    		    			
    		    		</div>
    		    		<div class="ssdiv">
    		    			<input class="ssinp" type="" name="" id="" value=""  placeholder="请输入单据号/手机号/卡号/姓名/车牌号"/>
    		    		</div>
    		    		<div class="simg">
    		    			<img src="../images/60x60.gif"/>
    		    		</div>
    		    	</div>
    		    </div>
    		    
    		    <div class="sj">
    					    <div class="br"></div>
    					    <div class="tc"></div>
    			 </div>
    		    
    		    
    		</div>
    		<script src="../js/mui.min.js"></script>
    		<script type="text/javascript">
    			window.onload = function(){
    				
    				
    				
    			}
    		</script>
    	</body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70]: /images/20220402/841c6c80e2d14d09b85ed0e4cd64f10f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70 1]: /images/20220402/a5d02b40d8964109a963b8246a7c7fdc.png