如何通过具有响应能力的CSS绘制跨背景 [英] How to draw cross background via css which is responsive

问题描述

如何在单个区域(div)中通过CSS绘制这样的形状?

How to draw such an shape via css in a single section(div)?

当前我已经使用了两个div检查我的代码

currently i have used two div check my code

这个想法很简单，从水平中间开始，黑色首先需要下降45度直到下一个100像素，然后其余部分应该下降180度.所有这些都需要在单个容器/分区/格中完成.

The idea is simple, from horizantally middle the black color first need to go down at 45 degree till next 100px and then it should go at 180 degree for remaining part. All this needs to be done for a single container/section/div.

.grad {
  height:100px;
  width:100%;
  background:linear-gradient(45deg, white 50%, black 0),
  linear-gradient(blue 20%, black 0);
}

.grad1 {
  height:100px;
  width:100%;
  background:linear-gradient(-130deg, orange 0%, black 0),
  linear-gradient(blue 20%, black 0);
}

<div class="grad1">

</div>
<div class="grad">

</div>

请指导我通过CSS在单个div中实现这种背景

Please guide me to achieve such background in single div via css

推荐答案

您可以尝试执行以下操作:

You can try something like this:

.header {
  height:200px;
  background:
    /*Top part*/
    linear-gradient(#000,#000) top/100% 50%,
    /*Bottom part*/
    linear-gradient(to top right,transparent 49%,#000 50.5%) bottom center/100px 50%,
    linear-gradient(#000,#000) bottom right/calc(50% - 50px) 50%;
   background-repeat:no-repeat;
}

<div class="header">

</div>

为了获得更好的可视化效果，请更改渐变的颜色以查看不同的形状:

For a better visualization, change the colors of gradient to see the different shapes:

.header {
  height:200px;
  background:
    /*Top part*/
   linear-gradient(blue,blue) top/100% 50%, /* Fill 100% width and 50% height at the top*/
   /*Bottom part*/
   linear-gradient(to top right,transparent 49%,red 50.5%) bottom center/100px 50%, /*Create a triangle inside a square to have the 45deg at the bottom center*/
   linear-gradient(green,green) bottom right/calc(50% - 50px) 50%; /*Fill half the width minus half the width of the square at the bottom right*/
   background-repeat:no-repeat;
}

<div class="header">

</div>

这篇关于如何通过具有响应能力的CSS绘制跨背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！