用css画一个三角形

最新推荐文章于 2024-04-23 14:33:07 发布

Floatwor青舟

最新推荐文章于 2024-04-23 14:33:07 发布

阅读量868

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/f944913628/article/details/115272203

版权

前端学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

怎么用css画一个三角形呢？ △

1、思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。

2、首先创建一个带边框的div

<body>
  <style>
    #triangle {
      width: 50px;
      height: 50px;
      border: 20px solid;
      border-color: blue red green greenyellow;
    }
  </style>
  <div id="triangle">

  </div>
</body>

在这里插入图片描述
3、然后将div 的宽高设置为0

      width: 0;
      height: 0;

在这里插入图片描述
4、随后将其他的三个边框给取消点：

  <style>
    #triangle {
      width: 0;
      height: 0;
      border: 40px solid;
      border-color:transparent transparent transparent greenyellow;
    }
  </style>

在这里插入图片描述
5、随后，我们就可以利用更改border的边框，我们可以随意控制写出我们想要的三角形，通过控制边框的大小来实现三角形的大小，通过控制边框的位置来改变三角形的位置。

在这里插入图片描述

6、如果要生成一个直角三角形，通过border-width或者border-color相邻边进行设置都可以。
在这里插入图片描述

Floatwor青舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css画一个三角形

怎么用css画一个三角形呢？ △1、思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。2、首先创建一个带边框的div<body> <style> #triangle { width: 50px; height: 50px; border: 20px solid; border-color: blue red green greenyellow; } </styl
复制链接

扫一扫