向这样的虚线梯形框有什么逻辑么?我是准备拿两个div去拼接的
<!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中的合成与混合模式
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读