css 绘制三角形和梯形

矫情吗；* 2021-07-25 01:46 569阅读 0赞

**绘制三角形和梯形，实际上是利用div的边框来实现的**

**三角形**
    
    将div的内容区域宽高设置为0px，边框设置大小，即为4块相拼接的三角形，
    令其他三块的颜色为透明(或边框大小为0)，就可得到三角形
    边框的实现:通过伪元素,再做一个和该三角形(颜色设置成边框颜色)相同大小的三角形,颜色为白色,向下移动1px即可
    
    **梯形**
    上下的三角形，通过设置div宽的大小，高为0px实现
    左右的三角形，通过设置div高的大小，宽为0px实现

**代码示例**  
方法一:

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div01{ 
    				width:0px;
    				height:10px;
    				border-top:40px solid transparent;
    				border-left:40px solid transparent;
    				border-right:40px solid blue;
    				/*border-bottom:20px solid green;*/
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div class="div01">
    			
    		</div>
    	</body>
    </html>

方法二:带边框  
效果图:  
![在这里插入图片描述][20201122213504628.png_pic_center]

.jf-list-tip-triangle{ 
        position: absolute;
        width: 0;
        height: 0;
        left: var(--prefixGap,5%);
    
        box-sizing: border-box;
        border-top-width: 0px;
        border-right-width: 6px;
        border-bottom-width: 6px;
        border-left-width: 6px;
    
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #aaa;
        border-left-color: transparent;
    
        border-style: solid;
    }
    
    .jf-list-tip-triangle::after{ 
        content: " ";
        box-sizing: border-box;
        position: absolute;
        top: 1px;
        left: 0;
        margin-left: -6px;
        border-width: 6px;
        border-right-width: 6px;
        border-bottom-width: 6px;
        border-left-width: 6px;
        border-top-width: 0;
        border-bottom-color: #fff;
    
        width: 0;
        height: 0;
        border-top-color: transparent;
        border-right-color: transparent;
        border-left-color: transparent;
        border-style: solid;
    }

[20201122213504628.png_pic_center]: /images/20210724/b3ae9a2edf8b40a99b97a67bc2d46538.png