如何在CSS中倾斜虚线边框? [英] How to slant dashed border in CSS?

问题描述

我正在尝试使用CSS为邮件应用程序设计信封.我的客户希望以此方式绘制虚线边框

I am trying to design an envelope using CSS for a Mail App. My client wants dashed borders in this manner

如何使用CSS边框实现这种效果?

How can I achieve that effect with CSS borders?

推荐答案

您可能需要稍微玩些颜色.

You may have to play with the colors a little.

.enveloppe {
	padding: 1em;
	border: 16px solid transparent;
	border-image: 16 repeating-linear-gradient(45deg, red 0, red 1em, transparent 0, transparent 2em,
	              #b67 0, #b67 3em, transparent 0, transparent 4em);
	
	max-width: 20em;
}

<div class="enveloppe">Lorem Ipsum</div>

这篇关于如何在CSS中倾斜虚线边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！