生成箭头

最新推荐文章于 2024-07-26 16:01:33 发布

wyd1022

最新推荐文章于 2024-07-26 16:01:33 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_22889599/article/details/78400624

css 专栏收录该内容

6 篇文章

订阅专栏

<div class="arrow-up"><!--向上的三角--></div>

.arrow-up{
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  position: absolute;
  margin-left: 50px;
  margin-top: -5px;
}

ul {
  width: 175px;
    /*box-shadow: 4px 1px 5px 0 rgba(191,191,191,0.50);*/
    box-shadow: 0px 2px 12px 0 rgba(0,0,0,.4);
  background-color: #fff;
  padding: 7px;
  z-index: 333;
  position: relative;//此处属性必须要为relative
  &:after{
    content: '';
    border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #fff;
  position: absolute;
  top: 16px;
  left: -6px;
  }
  &:before{
    content:'';
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #fff;
     position: absolute;
    top: 16px;
    left: -6px;
  }