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

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

php css html

html5 javascript

阅读 2.2k

2 个回答

得票最新

supreme

2.3k12365

发布于
2017-09-22

✓ 已被采纳

  .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;
  }

qzuser_5803554d42384

663

发布于
2017-09-22

更新于
2017-09-22

<!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中的合成与混合模式

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？