通过css绘制跨背景上/下响应 [英] Draw cross background up/down 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 three div check my code :)

这个想法很简单，首先，从水平中间开始，橙色首先需要下降45度，直到下一个100像素，然后剩余部分应该下降180度.

The idea is simple, for top, from horizontally middle the orange color first need to go down at 45 degree till next 100px and then it should go at 180 degree for remaining part.

对于底部，从水平中间开始，橙色首先需要下降45度直到下一个100像素，然后剩余部分应该下降180度.

For bottom, from horizontally middle the orange 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%, #f3ab2a 0),
  linear-gradient(blue 20%, black 0);
}

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

<div class="grad2">

</div>

<div class="grad1">

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

</div>

推荐答案

Similary到我以前的答案，您需要添加顶部并调整一些值:

Similary to my previous answer, you need to add the top part and adjust few values:

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

<div class="header">

</div>

这里使用了两种渐变.一个创建三角形的形状:

There is two kind of gradient used here. One to create a triangle shape:

.box {
  height:200px;
  background:
  linear-gradient(to bottom left,transparent 49%,orange 50.5%) 
  top center/ /*place it at top center*/
  100px 100px  /*width:100px height:100px*/
  no-repeat;
  border:1px solid;
}

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

诀窍是使用对角线方向(例如to bottom left)，然后使颜色的50％变为透明的50％.然后将其设为正方形(100px 100px)，就可以得到所需的45度角.

The trick is to use a diagonal direction (to bottom left for example) and you make 50% of the color and 50% transparent. Then by making it a square (100px 100px) you have the 45deg you want.

另一个渐变更容易.这是一个简单的矩形，无需定义方向或颜色停止.我们只需要定义大小和位置:

The other gradient is easier. It's a simple rectangle where there is no need to define direction or color stop. We only need to define the size and position:

.box {
  height:200px;
  background:
  linear-gradient(orange,orange)  /*define the color*/
  center/ /*place it at the center*/
  100% calc(100% - 50px) /*width:100% height:(100% - 50px)*/
  no-repeat;
  border:1px solid;
}

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

然后只需使用任意数量的渐变即可.您将拥有多个背景层，并通过定义相同的颜色来获得所需的形状.

Then simply use as many gradients as you want. You will have multiple background layers and by defining the same color you obtain the needed shape.

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