纯css样式箭头和三角形

最新推荐文章于 2024-07-31 16:40:00 发布

duplicities

最新推荐文章于 2024-07-31 16:40:00 发布

阅读量8k

点赞数

本文链接：https://blog.csdn.net/duplicities/article/details/45488731

版权

本文分享了使用纯CSS实现简单箭头和三角形的方法，通过设置width和height为0来达到效果，适合网页开发中创建箭头的需求。

摘要由CSDN通过智能技术生成

最近学习css的样式，终于有时间把自己的心得写出来。用纯css样式实现简单的箭头和“<"">"例子，方法有两个，本质都差不多从一条边拉伸到另一个方向形成箭头。

平时网页编写中经常遇到箭头，我们除了图片外，用纯css实现下面效果

代码如下：

#a{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: #000000;
    /*position: relative;*/
}
#b{
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-top-color: white;
   /* position: absolute;*/
    margin-top: -50px;
    margin-left: -40px;}

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

实现箭头代码关键是设width和height为0；

代码如下：

.up {
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:50px solid #000000;
}

/*箭头向下*/
.down {
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:50px solid #bb8ccc;
}

/*箭头向左*/
.left {
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-right:50px solid #ff2a28;
}

/*箭头向右*/
.right {
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid #793380;
}
<body>   
<!--向上的三角-->
<div class="up">  </div>  
<!--向下的三角-->
<div class="down">  </div>   
<!--向左的三角-->
<div class="left"> </div>
<!--向右的三角-->
<div class="right"></div></body>

另一种实现如图

实现的代码如下：

#box{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: #5ffa28;
    border-right-color: #ff4e24;
    border-bottom-color: #d26b7b;
    border-left-color: #2549ff;
}