美文网首页
如何用CSS 画一个三角形?

如何用CSS 画一个三角形?

作者: 祈澈菇凉 | 来源:发表于2020-11-27 10:30 被阅读0次

这里新创建了一个专题,为自己之后的跳槽做准备,每天给自己一个小时的时间去看网上的一些面试题,并且将这些面试题的答案加上自己思考以及动手时间的内容整理成笔记,记录下来。
尤其是在下班之后没有事情做的时候,不要想着去玩游戏,而是花一点点的时间去浏览一下这两年前端市场里面出现的一些知识点吧~~

今天记录一个简单的问题吧
如何用CSS 画一个三角形?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>     
          .triangle {
            width: 0px;
            height: 0px;
            border-color: transparent transparent red transparent;
            border-width: 50px 50px 50px 50px;
            border-style: solid;
          }
        </style>
    </head>
    <body>
       <div class="triangle"></div>      
    </body>
</html>

效果如同下图所示~~

相关文章

  • 如何用css画三角形&太极

    一、如何用css画一个三角形 搜索学习资源:Google >>css tricks shape >> 画一个如下图...

  • 如何用 css 画一个心形

    如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位...

  • 关于CSS画三角形的那些事儿

    用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应...

  • 20170307 第十三课时 盒模型之border设置

    作业:用CSS控制DIV的边框画一个三角形 盒模型之border讲解 di...

  • 如何用css画一个三角形

    1.先将盒模型的4条边设置成想要的粗细,和你最终需要的高度的值要一样。 2.将盒模型的宽度设置为0,虽然不写这句也...

  • 如何用CSS 画一个三角形?

    这里新创建了一个专题,为自己之后的跳槽做准备,每天给自己一个小时的时间去看网上的一些面试题,并且将这些面试题的答案...

  • 记一次面试

    1.css垂直水平居中方法有哪些2.css三栏布局3.css写一个三角形4.css画一条0.5px的线5.cons...

  • CSS画一个三角形

    CSS画一个三角形出来 具体原理实现 一个加了边框的DIV DIV边框的划分规则1.CSS中的边框划分如图所示,只...

  • canvas基本操作

    画一条直线 画一个矩形 画一个三角形 画一个圆

  • 使用css画一些矢量图

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

网友评论

      本文标题:如何用CSS 画一个三角形?

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