纯css实现箭头样式的代码

实现向上,向下,向左、向右的;

HTML代码如下

<div id="triangle-facing-top"></div>
<div id="triangle-facing-right"></div>
<div id="triangle-facing-bootom"></div>
<div id="triangle-facing-left"></div>

CSS代码

#triangle-facing-top {
display: inline-block; margin: 72px;
width: 120px; height: 120px;

border-top: 24px solid; border-right: 24px solid;
transform: rotate(315deg);
}

#triangle-facing-right {
display: inline-block; margin: 72px;
width: 120px; height: 120px;

border-right: 24px solid; border-bottom: 24px solid;
transform: rotate(-45deg);
}

#triangle-facing-bootom {
display: inline-block; margin: 72px;
width: 120px; height: 120px;

border-bottom: 24px solid; border-left: 24px solid;
transform: rotate(315deg);
}

#triangle-facing-left {
display: inline-block;
margin: 72px;
border-left: 24px solid; border-bottom: 24px solid;
width: 120px; height: 120px;
transform: rotate(45deg);
}

~~~

未经允许不得转载:朱邦邦的WEB前端开发博客 » 纯css实现箭头样式的代码

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址