zoukankan      html  css  js  c++  java
  • CSS 绘制三角形的六种方法

    1. 设置不同颜色的 border

    <div class="block"></div>
    
    .block {
        display: inline-block;
        height: 0;
         0;
        border-top: 50px solid yellowgreen;
        border-bottom: 50px solid transparent;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }
    

    2. linear-gradient() 线性渐变

    1. linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
    2. 通过旋转 rotate 或者 scale,就能得到各种角度
    .block {
        display: inline-block;
        height: 100px;
         100px;
        /* 从左下到右上,从蓝色开始渐变、到50%位置是透明色渐变开始、最后以透明色结束 */
        background: linear-gradient(45deg, blue, blue 50%, transparent 50%, transparent 100%);
        /* 或者: background: linear-gradient(to right top, blue, blue 50%, transparent 50%, transparent 100%); */
    }
    

    3. conic-gradient() 锥形渐变

    .block {
        display: inline-block;
        height: 100px;
         100px;
        /* 绘制圆心在(0, 0),绘制起点在90度,从蓝色开始绘制到45度的位置,从45.1度开始绘制透明色 */
        background: conic-gradient(from 90deg at 0 0, blue 0, blue 45deg, transparent 45.1deg);
    }
    

    4. 旋转 transform: rotate

    .block {
        display: inline-block;
        height: 100px;
         141px;
        position: relative;
        overflow: hidden;
    }
    
    .block::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: blue; 
        /* 旋转原点在(0, 0),旋转90度 */
        transform-origin: 0 0;
        transform: rotate(45deg);
    }
    

    5. clip-path 使用裁剪创建元素的可显示区域

    .block {
        display: inline-block;
        height: 100px;
         100px;
        background: blue;
        /* polygon 定义多边形, ()里面的每对参数表示多边形的顶点坐标(X,Y),也就是连接点 */
        clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
    }
    
    

    6. 使用特殊字符绘制三角形

    ◄ : &#9668; 
    ► : &#9658; 
    ▼ : &#9660; 
    ▲ : &#9650;
    ⊿ : &#8895;
    △ : &#9651;
    
    <div class="block">&#9650</div>
    
    .block {
        font-size: 100px;
        color: blue;
    }
    

    注意:该方法呈现的三角形效果与当前浏览器所安装的字体相关,所以,慎用。

    参考: https://github.com/chokcoco/iCSS

  • 相关阅读:
    kotlin,短小精悍
    最近把Vue又看了下
    https://docs.spring.io/spring-framework/docs/current/reference/html/web-reactive.html#webflux-cors
    os模块——获取上层目录
    启动flask服务:flask run -h 0.0.0.0 -p 5000
    22端口和3389端口之我竟然用3389连接linux服务器,关键是我之前用22端口连接过linux!!!
    datetime 模块
    查看公网ip
    字典——删除元素
    docker端口映射
  • 原文地址:https://www.cnblogs.com/cckui/p/14681776.html
Copyright © 2011-2022 走看看