CSS画三角形

最新推荐文章于 2023-01-06 16:03:46 发布

吴佩佩佩佩

最新推荐文章于 2023-01-06 16:03:46 发布

阅读量2.3k

点赞数

分类专栏： CSS 文章标签： css css3 html html5 js

本文链接：https://blog.csdn.net/m0_37797410/article/details/110223097

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

使用css画三角形主要使用到border属性，首先来看一个例子：

.demo{ width: 0px; height:0px; border: 50px; border-style: solid; border-color: red blue yellow green; }

<div class="demo"></div>

在这里插入图片描述
上面代码可以看到，给div设置的宽高为0，边框50px，并且4条边为不同的颜色，通过颜色可以看出，边框是由三角形组成，再看一个例子：

.demo{ width:0; height:0; border-width: 10px 50px 100px 50px; border-color: red blue yellow green; border-style: solid; }

<div class="demo"></div>

在这里插入图片描述
这次设置了不同宽度的边框，并且也是不同颜色，可以看到设置10px的红色三角形最小，这时换个思路，如果我将红色设置为0，并且将红绿蓝色改成transparent，那么是否就得到了一个完整的黄色三角形呢？看例子：

.demo{ width:0; height:0; border-width: 0 50px 100px 50px; border-color: transparent transparent yellow transparent; border-style: solid; }

<div class="demo"></div>

在这里插入图片描述
这样就得到了一个完整的三角形，通过这个思路，可以画出各种各样的三角形。

完整代码：

<!DOCTYPE html>
<html lang="en">
<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>
    div{ display: inline-block; }
    .icon1{ width:0; height:0; border-width: 0 50px 100px 50px; border-color: transparent transparent red transparent; border-style: solid; }
    .icon2{ width:0; height:0; border-width: 50px 0 50px 100px; border-color: transparent transparent transparent red; border-style: solid; }
    .icon3{ width:0; height:0; border-width: 100px 50px 0 50px; border-color: red transparent transparent transparent; border-style: solid; }
    .icon4{ width:0; height:0; border-width: 50px 100px 50px 0; border-color: transparent red transparent transparent; border-style: solid; }
    .icon5{ width:0; height:0; border-width: 100px 100px 0 0; border-color: red transparent transparent transparent; border-style: solid; }
    .icon6{ width:0; height:0; border-width: 100px 0 0 100px; border-color: red transparent transparent transparent; border-style: solid; }
    .icon7{ width:0; height:0; border-width: 0 100px 100px 0; border-color: transparent transparent red transparent; border-style: solid; }
    .icon8{ width:0; height:0; border-width: 0 0 100px 100px; border-color: transparent transparent red transparent; border-style: solid; }
  </style>
</head>
<body>
  上
  <div class="icon1"></div>
  右
  <div class="icon2"></div>
  下
  <div class="icon3"></div>
  左
  <div class="icon4"></div>
  <br><br><br><br>
  左上
  <div class="icon5"></div>
  右上
  <div class="icon6"></div>
  左下
  <div class="icon7"></div>
  右下
  <div class="icon8"></div>
</body>
</html>