案例-三角形（CSS3）

Myth丶恋晨 2023-10-03 13:57 94阅读 0赞

## 案例-三角形（CSS3） ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>案例-三角形</title>
        <style>
            div {
        
                position: relative;
                width: 249px;
                height: 35px;
                border: 1px solid #000;
            }
    
            div::after {
        
    
                content: "";
                position: absolute;
                top: 8px;
                right: 15px;
                width: 10px;
                height: 10px;
                border-right: 1px solid #000;
                border-bottom: 1px solid #000;
                transform: rotate(45deg);
                transition: all 0.2s;
    
    
            }
    
            /*   鼠标经过div 里面的三角旋转 */
            div:hover::after {
        
                transform: rotate(225deg);
            }
        </style>
    </head>
    
    <body>
        <div>
    
        </div>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，94人围观）

还没有评论，来说两句吧...

相关阅读

相关使用CSS3生成三角形

练习CSS布局去尝试模仿小米官网写了一下。结果看到了一个小三角。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

柔情只为你懂/ 2023年10月06日 13:31/ 0 赞/ 117 阅读

相关案例-三角形（CSS3）

案例-三角形（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta c

Myth丶恋晨/ 2023年10月03日 13:57/ 0 赞/ 95 阅读

相关 css3实现三角形

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了 .arrow{ width:

末蓝、/ 2023年07月24日 08:36/ 0 赞/ 124 阅读

相关 Css3制作三角形图标

在建站过程中，有时候需要给部分容器添加装饰效果，这样就会添加小图标，今天和大家分享用Css3制作三角形图标。在Css3之前，我们使用transparent属性来实现背景颜色

布满荆棘的人生/ 2022年12月04日 08:44/ 0 赞/ 327 阅读

相关 android 三角形背景图,CSS3 三角形渐变背景图

CSS 语言： CSSSCSS 确定 .background \{ height: 400px; width: 650px; background: linear

水深无声/ 2022年10月17日 11:16/ 0 赞/ 339 阅读

相关 css3实现三角形

1. ![20210809135923946.png][] <div class="upper"></div> .upper { widt

阳光穿透心脏的1/2处/ 2022年09月04日 00:47/ 0 赞/ 330 阅读

相关 CSS3实现三角形效果

原文：[Magic of CSS border property][] 译文：不可思议的CSS border属性译者：dwqs 在CSS中，其border属性有很多的规

Bertha 。/ 2022年06月12日 22:38/ 0 赞/ 475 阅读

相关 css三角形

今天给大家带来 CSS 三角形绘制方法 ![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1][] \triangle-up

深藏阁楼爱情的钟/ 2022年06月05日 07:27/ 0 赞/ 356 阅读

相关 CSS3 三角形

使用纯CSS绘制图片可以减少请求位图带来的网络开销，提高渲染速度。 CSS绘制三角形主要利用了——当元素的宽高慢慢缩小为0时，4个边框也会由梯形逐渐变为三角形。常和b

约定不等于承诺〃/ 2022年05月27日 06:45/ 0 赞/ 310 阅读

相关 css3实现三角形、等腰梯形

三角形 <div class="box"></div> .box { width:0px; height:0px; b

不念不忘少年蓝@/ 2021年11月01日 19:24/ 0 赞/ 1013 阅读