CSS绘制斜线边框

Question

我在网页设计方面经验不多，我只是想写一篇CSS 得到类似于此的输出

任何人都可以帮助我使用css实现这种标题

Answer 1

你试过transform: skewX() 它在某种程度上扭曲了对象。我喜欢在css中使用transform，因为我可以操作div我喜欢它，它需要一些时间来习惯它以及它是如何工作的但你应该玩它看看它是否适合你。 以下是有关变换的更多信息：https://www.w3schools.com/cssref/css3_pr_transform.asp

我在这里举了一个例子： https://jsfiddle.net/4r3mqctp/1/

希望这会有所帮助

Answer 2

这是一个如何实现的例子。

.root {
  border: 1px solid gray;
  background-color: yellow;
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.slash {
  width: 200%;
  height: 200%;
  background-color: white;
  border: 5px solid gray;
  transform: rotate(45deg) translateY(100%);
}

<div class="root">
  <div class="slash"></div>
</div>

https://jsfiddle.net/0tgwa6xn/