旧帖边框简单模拟

马黑黑

这是一个旧帖边框的大致模拟，大家可以精雕细琢：

<style>
#mydiv {
	width: 760px;
	min-height: 760px;
	padding: 40px;
	box-sizing: border-box;
	border-radius: 12px;
	box-shadow: 0 0 8px #000;
	position: relative;
	margin: 20px auto;
}
#mydiv::before, #mydiv::after {
	position: absolute;
	content: '';
}
#mydiv::before {
	left: 10px;
	top: 10px;
	right: 10px;
	bottom: 10px;
	border: 2px dashed purple;
	border-radius: inherit;
}
#mydiv::after {
	content: '帖子标题 Title';
	padding: 10px 40px 10px 10px;
	left: -20px;
	top: 16px;
	border-radius: 10px 0 0 10px;
	background: rebeccapurple;
	opacity: .85;
	font: bold 20px/28px sans-serif;
	color: white;
	clip-path: polygon(0 0,100% 0,90% 50%, 100% 100%, 0 100%);
}
</style>

<div id="mydiv">
	<p><br><br>正文</p>
</div>

运行代码

原理容易看出来的吧：两个伪元素，一个做内边框，一个做标题。标题这个，可以再细细切割，这里先酱紫吧。

樵歌

到七夕是不是能派对上用场

小文

好适用，收藏了。问大师好，问师叔早！

南无月

这个边框对偶来说是新的，没见过。信笺纸

红影

黑黑辛苦了，标题哪里还做了特别设计，这个很简洁实用

一斛珠

看不懂 我就蹭个热度
给黑黑老师

马黑黑

醉美水芙蓉 发表于 2023-6-3 11:48
很漂亮的边框！

以前论坛用过的H5边框，换用新的实现方法

马黑黑

樵歌 发表于 2023-6-3 07:58
到七夕是不是能派对上用场

按道理是可以的

马黑黑

小文 发表于 2023-6-3 08:20
好适用，收藏了。问大师好，问师叔早！

大师这个称谓太大了

马黑黑

一斛珠 发表于 2023-6-3 11:11
看不懂 我就蹭个热度
给黑黑老师

会用就好

马黑黑

南无月 发表于 2023-6-3 08:56
这个边框对偶来说是新的，没见过。信笺纸

真正的信笺、方格稿啥的也有，找找

马黑黑

红影 发表于 2023-6-3 10:02
黑黑辛苦了，标题哪里还做了特别设计，这个很简洁实用

若使用，可以在精装一下

红影

马黑黑 发表于 2023-6-3 12:19
若使用，可以在精装一下

嗯嗯，然后再加个音乐。

马黑黑

红影 发表于 2023-6-3 16:35
嗯嗯，然后再加个音乐。

加啥都行

樵歌

马黑黑 发表于 2023-6-3 12:16
按道理是可以的

还是用不来

梦缘

谢谢老师的边框，感谢分享！

南无月

马黑黑 发表于 2023-6-3 12:18
真正的信笺、方格稿啥的也有，找找

看来压箱底宝贝不少。。。这就去翻 翻

红影

马黑黑 发表于 2023-6-3 17:06
加啥都行

对，还可以加图片之类的。

红影

樵歌 发表于 2023-6-3 20:17
还是用不来

我可以用这个先去做一个