CSS 如何创建具有非线性边框的容器

标签 css

我需要为具有这种边框的文本重新创建一个容器: enter image description here

正如您从图像中看到的,容器的边框不是直的,所以我不知道从哪里开始。由于容器内部有文本,并且网站将响应,我怎样才能重新创建它效果如何?

有人可以通过任何提示为我指出正确的方向吗?

最佳答案

使用边框图像来渲染边框。 您可以使用border-image-generator轻松生成 css 代码,但如果框的大小比图像大,并且图像(如您的图像)没有可重复的部分,结果将不完美。

另一个想法是使用 SVG 作为背景图像/容器本身,因为 SVG 是基于矢量的,并且可以拉伸(stretch),并且您可以根据需要定义路径。

关于CSS 如何创建具有非线性边框的容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31785029/

相关文章:

php - 让php echo漂浮在图像周围

html - 具有固定居中布局的页面,滚动条移动内容的位置

php - 使用 CSS 格式 type=text 按钮

html - 对齐 &lt;textarea&gt; 右上角的 <p> 标签?

CSS - 添加后 "|"后的空间

html - CSS Flexbox 中的 chalice 式单页应用程序 UI - 滚动面板在 Firefox 中不起作用

php - 使用 ZEND 服务器在 PHP 中将 PDF 转换为 JPEG

jQuery 将元素拖动到初始状态为隐藏的可排序列表中

html - 带有切边、边框和透明背景的div,如何将切边添加到左上角和右下角?

html - CSS 非选择器