css画箭头,三角形

一麻袋开心呀

已于 2024-05-28 00:06:38 修改

阅读量862

点赞数 10

文章标签： css 前端 javascript

于 2024-05-27 23:57:48 首次发布

本文链接：https://blog.csdn.net/weixin_48095278/article/details/139250887

版权

箭头

.arrow{
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 4px;
}
//向上
.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
//向下
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
//向右
.right{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
//向左
.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

三角形

//需要哪个朝向的三角形,将哪条边设置你要的颜色,其余三条边设置为透明色即可
.triangle{
    width: 0px;
    height: 0px;
    border-top: 10px solid black;
    border-right: 10px solid black;
    border-bottom: 10px solid black;
    border-left: 10px solid black;
}