border绘制三角形

最新推荐文章于 2024-10-09 14:38:34 发布

鸵鸟吃补丁

最新推荐文章于 2024-10-09 14:38:34 发布

阅读量392

点赞数

本文链接：https://blog.youkuaiyun.com/qq_45648136/article/details/114362451

版权

border: 元素的边框，实际上border是由三角形组合而成，并不是矩形。
transparent:设为透明。

1.边框设置不同的背景色

<style>
     div {
        width: 0;
        height: 0;
        border-top: 20px solid lightblue;
        border-left: 20px solid lawngreen;
        border-right: 20px solid lightpink;
        border-bottom: 20px solid lightsalmon;
     }
</style>

<body>
<div></div>
</body>

效果：
在这里插入图片描述

2.等腰三角形

 #a{
width: 0;
height: 0;
border:3rem solid;
border-color: blue transparent transparent transparent;
} 


<div id="a"></div>

效果：
在这里插入图片描述

轮流设置border-color试试

border-color:  transparent  red transparent transparent;

效果：
在这里插入图片描述

3.三角形（随意设置高、宽）

（1）设置高 top

 #a{
       width: 0;
       height: 0;
       border-top: 10rem solid red;   
       border-left: 6rem solid transparent;
      } 

<div id="a"></div>

效果：
在这里插入图片描述

（2）设置宽 left

#a{
       width: 0;
       height: 0;
       border-top: 10rem solid red;
       border-left: 12rem solid transparent;
      } 

<div id="a"></div>

效果：
在这里插入图片描述

4.任意图形

#a{
       width: 0;
       height: 0;
       border-top: 6rem solid red;
       border-left: 10rem solid transparent;
       border-right: 10rem solid blue;
      } 

<div id="a"></div>

效果：
在这里插入图片描述