向这样的虚线梯形框有什么逻辑么?

clipboard.png
向这样的虚线梯形框有什么逻辑么?我是准备拿两个div去拼接的

阅读 2.2k
2 个回答
  .box{
    position: relative;
    width: 150px;
    height: 100px;
    border: 1px dashed grey;
  }
  .box::before{
    content:'';
    position: absolute;
    width: 50px;
    height: 30px;
    background: #fff;
    right: -1px;
    top: -1px;
  }
  .box::after{
    content:'';
    position: absolute;
    width: 57px;
    border-bottom: 1px dashed grey;
    transform: rotate(32deg);
    right:-5px;
    top: 14px;
  }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: #011526;
        }

        .box {
            position: relative;
            width: 120px;
            height: 70px;
            border: 1px dashed #023e69;
            mix-blend-mode: screen;
        }

        .box::before {
            content: '';
            position: absolute;
            width: 30px;
            height: 40px;
            background-color: #000;
            right: -1px;
            top: -1px;
            mix-blend-mode: initial;
        }

        .box::after {
            content: '';
            position: absolute;
            width: 50px;
            border-bottom: 1px dashed #023e69;
            transform: rotate(50deg);
            right: -10px;
            top: 18px;
            mix-blend-mode: initial;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

加个css3的混合模式比较好。这样背景色不论怎么变化都不会有问题。
可以参考这边文章:
CSS中的合成与混合模式

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题