CSS中实现空心三角箭头的方法是什么-群英

上一篇：CSS的li和ul标签怎样用，有什么技巧下一篇：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中实现空心三角箭头的方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。

标签：空心三角箭头

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：CSS的li和ul标签怎样用，有什么技巧下一篇：CSS使用图片背景模糊问题如何处理呢？