css绘制三角形和箭头

  • Z时代
  • 2024-01-10
  • 分类：综合

网站中写三角形或者箭头是否还在用图片？下面记录一下用css绘制三角形的方法。

先看一下下面的代码：

<div class="box1"></div>
<br />
<div class="box2"></div>
<style>
.box1{width:0px;height:0px;border:50px solid red;}
.box2{width:0px;height:0px;border-width:50px;border-style:solid;border-color:red green blue yellow;}
</style>

效果：

在上面的效果中，我们看到了四个三角形，如何得到一个三角形呢？如果其中三个三角形透明，剩余一个三角形。css代码如下：

.box2{width:0;height:0;border-width:20px;border-style:solid;border-color:red transparent transparent transparent;}

效果：

以上就得到了一个三角形，想想其他方向的三角形如何得到呢？ 箭头呢？下面附上代码

.arrow{width:50px;height:50px;border-width:2px;border-style:solid;border-color:red red transparent transparent;transform:rotate(45deg);}

本文转载自：迹忆客（https://www.jiyik.com）

以上是 css绘制三角形和箭头 的全部内容， 来源链接： utcz.com/z/290162.html

回到顶部