美文网首页
css实现三角

css实现三角

作者: 给我小前端 | 来源:发表于2017-06-27 13:51 被阅读6次

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
        /*箭头向上*/
        
        .arrow-up {
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid #fea;
        }
        /*箭头向下*/
        
        .arrow-down {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 20px solid #0066cc;
        }
        /*箭头向左*/
        
        .arrow-left {
            width: 0;
            height: 0;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-right: 30px solid yellow;
        }
        /*箭头向右*/
        
        .arrow-right {
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid green;
        }
    </style>
</head>

<body>
    <div class="arrow-up">
        <!--向上的三角-->
    </div>
    <div class="arrow-down">
        <!--向下的三角-->
    </div>
    <div class="arrow-left">
        <!--向左的三角-->
    </div>
    <div class="arrow-right">
        <!--向右的三角-->
    </div>
</body>

</html>

相关文章

  • css实现三角形

    css三角形实现代码

  • css 实现三角形箭头

    插入DOM 使用伪类 参考:用纯CSS实现的箭头CSS画三角形原理css整理 -- 右箭头,上下箭头,三角形 这个...

  • css绘制三角形(border属性的使用)

    1 . 实现一个简单的三角形 使用css 盒模型中的border (边框) 即可实现如下的三角形: 实现原理: 首...

  • css三角形

    用 CSS3 做一个三角形? 用伪类实现一个上三角?

  • CSS绘制三角形—border法

    1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: 实现原理: 首先来...

  • CSS实现空心三角形

    背景:WEB开发中,三角形的日常应用,以三角形箭头最为常见,其用CSS来实现非常简单。 三角形的实现原理:是宽高都...

  • css实现三角

  • 2022css面试题总结

    H5 的新特性 css3 新特性 div 盒子居中 css 的弹性盒模型和怪异盒模型 css 实现三角形 浏览器兼...

  • 使用css画一些矢量图

    用纯CSS画一些矢量图:比如矩形、原型、半圆、扇形、三角形等等。重要的不是如何实现,而是在实现的过程中发现css还...

  • css实现三角形

    今天学到的两种方式可以实现三角形,简单写一下 方法一: html代码: 我是三角形 css代码如下:用伪元素实现一...

网友评论

      本文标题:css实现三角

      本文链接:https://www.haomeiwen.com/subject/ephecxtx.html