如何用CSS 画一个三角形?

简介: 如何用CSS 画一个三角形?

这里新创建了一个专题,为自己之后的跳槽做准备,每天给自己一个小时的时间去看网上的一些面试题,并且将这些面试题的答案加上自己思考以及动手时间的内容整理成笔记,记录下来。

尤其是在下班之后没有事情做的时候,不要想着去玩游戏,而是花一点点的时间去浏览一下这两年前端市场里面出现的一些知识点吧~~


今天记录一个简单的问题吧

如何用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>

效果如同下图所示~~

相关文章
|
7月前
|
前端开发
CSS画三角形(三种方法)
CSS画三角形(三种方法)
|
7月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
67 3
|
7月前
|
前端开发
玩转CSS盒子之 三角形盒子
玩转CSS盒子之 三角形盒子
68 0
|
2月前
|
前端开发
如何使用css写三角形
如何使用css写三角形
33 4
|
2月前
|
前端开发
用纯 CSS 创建一个三角形
使用纯 CSS 可以通过边框技巧创建三角形。例如,要创建一个指向下方的等边三角形,可以将 `width` 和 `height` 设为 `0`,并通过透明的左右边框和有颜色的底边来形成三角形。
|
3月前
|
前端开发
CSS制作小三角形
CSS制作小三角形
20 1
|
2月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
4月前
|
前端开发
如何使用css写三角形
如何使用css写三角形
39 1
|
5月前
|
前端开发
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
92 1
|
6月前
|
前端开发
技术经验分享:CSS画三角形(三种方法)
技术经验分享:CSS画三角形(三种方法)
30 0