纯CSS框角装饰

Question

我最近在考虑可能有趣的界面设计理念，一个想到的想法是一种未来主义的基于盒子的设计，其中元素将具有薄的和半透明的边界线，在角落处具有小的不透明盒子

对我来说问题是为它考虑一个纯CSS解决方案因为我不想在HTML中添加任何其他标签，并且通过CSS我认为它可以使用伪类但只有一个元素能够有两个（:before和:after）

我很感激任何有关如何使用CSS实现这种设计的有用想法，如果可能的话。提前谢谢。

我在电影“Oblivion”中添加了一张图片。这大致是我的想象。

可能最好的描述是围绕“Tour Code _”

的部分

Answer 1

我知道@ c-smile已经回答了你的问题，但你可以在没有使用CSS的图像的情况下实现这一点。像这样：

＆＃13;

＆＃13;

body{
	background-color:black;
}
.dots {
	width: 200px;
	height: 200px;
	background-color: transparent;
	position: absolute;
	left: 20px;
	margin:10px;
	border: solid 1px rgba(255, 255, 255, 0.5);
}

.dots:before, .dots:after {
	content: "";
	position: absolute;
	top:-5px;
	height: calc(100% + 10px);
	width: 10px;
	background-image: linear-gradient(rgba(255, 255, 255, 1) 5px, rgba(255, 255, 255, 1) 5px),linear-gradient(rgba(255, 255, 255, 1) 5px, rgba(255, 255, 255, 1) 5px);
	background-size: 10px 10px;
	background-position: top center, bottom center;
	background-repeat: no-repeat;
}

.dots:before {
	left: -5px;
}
.dots:after {
	right: -5px;
}

＆＃13;

<div class="dots"></div>

＆＃13;

＆＃13;

＆＃13;

当然，它使用渐变，因此您可能需要小心浏览器兼容性，但它是所要求的纯css。

Answer 2

在此检查CSS边框图像示例：

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image