CSS绘制斜线边框[重复]答案

【问题标题】：CSS to draw slant line border [duplicate]CSS绘制斜线边框[重复]
【发布时间】：2017-06-20 18:31:09
【问题描述】：

我在网页设计方面没有太多经验，我只是想写一个 css 得到与此类似的输出

谁能帮我用css实现这种标题

【问题讨论】：

到目前为止你尝试过什么？你的代码在哪里？ stackoverflow.com/help/mcve
这么多问题已经问过同样的问题了..请使用谷歌

【解决方案1】：

你试过transform: skewX() 它在一定程度上使物体倾斜。我喜欢在 css 中使用转换，因为我可以按照自己喜欢的方式操作 div，需要一些时间来适应它以及它是如何工作的，但是你应该尝试一下它是否适合你。以下是有关 Transform 的更多信息：https://www.w3schools.com/cssref/css3_pr_transform.asp

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

希望这会有所帮助

【讨论】：

【解决方案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/

【讨论】：

它根本不是通用的。 OP 提供了一个他们想要达到的目标的例子。这是一个倾斜的边界。他们是否应该包含一些代码，即他们迄今为止尝试过的内容，是的。
感谢您的回复，我需要画一些类似于附图的东西。我对 css 很陌生，所以如果你能帮助我编写 css 以获得图像中的样式
@user3423144，我已经更新了我的答案，因此您可以查看其中一个解决方案。
@hungerstar，我弄错了。更新了我的答案。
非常感谢，看来我得到了我想要的东西。