zoukankan html css js c++ java

CSS绘制小三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list</title>
</head>
<style>
    
    .top{
        width:0;
        height:0;
        border-width:0 30px 30px;
        border-style:solid;
        border-color:transparent transparent #333;/*透明 透明  灰*/
        margin:40px auto;
        position:relative;
    }
    .down{
         width:0;
        height:0;
        border-width:30px 30px 0;
        border-style:solid;
        border-color:#333 transparent transparent;/*灰 透明 透明 */
        margin:40px auto;
        position:relative;
    }
    .left{
        width:0;
        height:0;
        border-width:30px 30px 30px 0;
        border-style:solid;
        border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
        margin:40px auto;
        position:relative;
    }
    .right{
         width:0;
        height:0;
        border-width:30px 0 30px 30px;
        border-style:solid;
        border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
        margin:40px auto;
        position:relative;
    }
</style>
<body>
    <div class="">
        
        <div class="top">
            
        </div>
        <div class="down">
            
        </div>
        <div class="left">
            
        </div>
        <div class="right">
            
        </div>
    </div>
</body>
</html>

查看全文

相关阅读:
区间DP——石子合并
 线性DP-最短编辑距离、编辑距离
 生成树协议
 交换机技术
 以太网原理
 接口知识点
 目前在中国有影响的几种现场总线比较
 委托
 C#有关继承知识点
 C#数组总结

原文地址：https://www.cnblogs.com/liujiale/p/10937405.html