hou_yi
骑猪游世界
采纳率0%
2020-12-11 22:43

如何用css写出这种图形 并且添加边框阴影

箭头

 

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

6条回答

  • Menkongkong Menkongkong 4月前
    body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
        }
        .center {
            width: 80px;
            height: 130px;
            border-left: 2px solid #000000;
            border-right: 2px solid #000000;
            box-shadow: 0px 0px 12px -5px #ff0000; 
        }
        .top {
            width: 56px;
            height: 56px;
            border-bottom: 2px solid #000000;
            border-right: 2px solid #000000;
            transform:rotate(45deg);
            margin-left: 11px;
            margin-top: -27px;
            background-color: #fff;
            box-shadow: inset -15px -15px 10px -20px #ff0000; 
        }
        .buttom {
            width: 56px;
            height: 56px;
            border-bottom: 2px solid #000000;
            border-right: 2px solid #000000;
            transform:rotate(45deg);
            margin-left: 11px;
            margin-top: 70px;
            background-color: #fff;
            box-shadow:3px 3px 10px -7px #ff0000; 
        }
    点赞 评论 复制链接分享
  • Menkongkong Menkongkong 4月前
    <div class="center">
            <div class="top"></div>
            <div class="buttom"></div>
    </div>

     

    点赞 评论 复制链接分享
  • ZSH_jerry shuxhan 4月前

    有这个思路了,再加上一些html,css3基础,做出这个东西问题不大

    点赞 评论 复制链接分享
  • hou_yi 骑猪游世界 4月前

    有没有具体代码大佬们

    点赞 评论 复制链接分享
  • ZSH_jerry shuxhan 4月前

    笨方法就是先把左边竖着的线用div的一个边框写出来,然后在用before,after把上下两条线做出来,用绝对定位确定位置,然后用css3新属性给转换到右边对称

    点赞 评论 复制链接分享
  • weixin_41817034 danielyulu 4月前

    两个平行四边形拼接在一起?

    点赞 评论 复制链接分享

相关推荐