javascript - 带有倾斜边框的现有 div 内的新 div

标签 javascript html css image

我正在尝试制作一个标题,如所附图片所示。我也在这个网站上尝试了其他答案,但实际上没有一个帮助很大。 我已经弄清楚了文本和 Logo 部分,但需要有人帮助处理倾斜的 div 边框。

我想要的效果:

effect I want

最佳答案

试试这个:

header {
  border:1Px solid;
  height: 200px;
  position: relative;
}

header:before, header:after {
  position: absolute;
  width: 0;
  height: 0;
  content: '';
  border-width: 100px;
  border-style: solid;
}

header:before {
  left: 0;
  border-color: transparent transparent transparent #000;
}

header:after {
  right: 0;
  border-color:transparent #000 transparent transparent ;
}
<header></header>

关于javascript - 带有倾斜边框的现有 div 内的新 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47289500/

相关文章:

html - 使用 CSS sprites 在表单元素上定位背景图像

html - 透明文本但CSS中的背景不透明

javascript - 我可以将每一行多行文本包装在一个跨度中吗?

javascript - 使用javascript获取所有表格行

jquery - 我可以在 CSS 中制作 Off-Canvas 滑出式菜单吗?

html - 自定义 Insightly HTML 联系表单(对齐、间隔字段)

jquery - CSS3 动画和更新 DOM

css - 文本占用设置宽度图像旁边的剩余宽度

javascript - 是否有一个 Javascript 习惯用法,其中函数 `func` 被称为 `func.bind(this)`

javascript - 使用javascript加载页面后将外部CSS应用于动态html