用CSS样式制作小三角和小箭头

最新推荐文章于 2024-05-27 23:57:48 发布

duolaminana

最新推荐文章于 2024-05-27 23:57:48 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS制作小三角和小箭头

本文链接：https://blog.youkuaiyun.com/weixin_44827568/article/details/91421240

本文介绍了如何使用CSS的border属性来创建可自定义颜色和大小的小三角形和箭头，避免了图片失真的问题。通过调整border-width、border-style和border-color，可以轻松实现不同方向的箭头效果。示例中提到了.left和.right类分别用于创建左三角和右三角，同时通过改变元素的位置实现不同方向的箭头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用css的border的style,width,color三个属性制作小三角和小箭头,颜色大小想怎么变就怎么变，不用担心使用图片失真等问题。

需要注意的是left,right,投票,bottom,这4个方位,需要一定的空间想象力,记住一个,其他的可以自己推算出来

transparent表示透明

小三角:

HTML结构

<div class="left"></div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>

CSS样式

div {
    width: 0px;
    height: 0px;
}

.left {
border-width: 20px;
border-style: solid;
border-color: transparent red transparent transparent;
}

在这里插入图片描述

.top {
    border-width: 20px;
    border-style: solid;
    border-color: transparent  transparent red transparent ;
}

最低0.47元/天解锁文章

200万优质内容无限畅学