css绘制箭头图标

最新推荐文章于 2025-04-21 18:12:49 发布

到点睡觉了.

最新推荐文章于 2025-04-21 18:12:49 发布

阅读量155

点赞数 2

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/noooow/article/details/145924897

版权

效果：
在这里插入图片描述
实现：

.big-arrow {
	 position: relative;
	 &:before {
	     content: ' ';
	     position: absolute;
	     width: 0;
	     height: 0;
	     border-top: 120rpx solid transparent; 
	     border-right: 100rpx solid transparent;
	     border-left: 100rpx solid transparent;
	     border-bottom: 120rpx solid #ED4040;
	     top: -180rpx;
	     left: 50%;
	     transform: translateX(-50%);
	     border-radius: 10rpx;
	 }
	 &:after {
	     content:' ';
	     position: absolute;
	     height: 190rpx;
	     width: 60rpx;
	     background: #ED4040;
	     top: 0rpx;
	     left: 50%;
	     transform: translateX(-50%);
	     border-radius: 10rpx;
	 }
}