CSS如何制作双对角线边框/角

pgpifvop 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(157)

伙计们。我在网站上工作，打算做这样的事情：enter image description here
现在我有了这个形状的一半

<div id="block"> </div>

#block {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
}

#block:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid #ccc;
  width: 400px;
}

看起来是这样的：enter image description here我该怎么做才能把它画得更远？比如把上面的另一条线移到右边和下面？谢谢。

css

来源：https://stackoverflow.com/questions/75589673/css-how-to-make-double-diagonal-border-corner

1条答案

按热度按时间

bxgwgixi1#

*{ margin: 0; padding: 0; }
body{ overflow: hidden; }
div.box{ display: block; width: 100%; background-color: red; margin-top: 100px; height: 100px; position: relative; }
div.box:before{ content: ""; position: absolute; right: -50px; top: -40px; width: 250px; height: 40px; background-color: red; transform: skew(-30deg) }

<div class="box">
  
</div>

你可以找到你的答案，你也可以调整使用变换css。

赞(0）回复(0）举报 2023-03-05

我来回答

CSS如何制作双对角线边框/角

1条答案

相关问题

热门标签

最新问答