如何制作 CSS 空心三角形箭头的详细步骤

发布时间：2023-09-14 08:52:10 所属栏目：语言来源：

导读：这篇文章给大家分享的是CSS中实现空心三角箭头的方法是什么。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
第一种

这篇文章给大家分享的是CSS中实现空心三角箭头的方法是什么。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
第一种写法利用常见的 after伪元素

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.arrow {

width: 20px;

height: 4px;

margin: 0 auto 7px;

border-left: 4px solid transparent;

border-right: 4px solid transparent;

border-bottom: 4px solid #343c99;

transform: rotate(45deg);

transform-origin: left;

}

.arrow:after {

content: '';

display: block;

width: 100%;

height: 100%;

border-left: 4px solid transparent;

border-right: 4px solid transparent;

border-top: 4px solid #343c99;

position: absolute;

right: -10px;

top: -14px;

transform: rotate(90deg);

transform-origin: bottom;

}

</style>

</head>

<body>

<div class="arrow"></div>

</body>

</html>

第二种写法相对于比较简单

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

/*简单*/

.wb_arrow{

border-right: 2px solid #343c99;

border-top: 2px solid #343c99;

height: 10px;

width: 10px;

margin:50px auto 0;

transform: rotate(deg);

-webkit-transform: rotate(0deg);

/*不加这两个属性三角会比上一个略丑, 大家可以试一下*/

border-left: 2px solid transparent;

border-bottom: 2px solid transparent;

}

</style>

</head>

<body>

<div class="wb_arrow"></div>

</body>

</html>

“CSS中实现空心三角箭头的方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!