在css中绘制图形的响应

我在顶部有一个'div'，有轻微的曲线。我尝试并使用边框实现。但我的担心是它没有反应。如何使其响应。任何想法？这是我试过的代码，看看这个。在css中绘制图形的响应

<div></div> 

div { 
    position:relative; 
    width:100%; 
    float:left; 
    background:green; 
    height:80px; 
    overflow:hidden 
    } 
div:before { 
    position: absolute; 
    content: ''; 
    left: 0; 
    right: 50%; 
    border: 298px solid transparent; 
    top: 0; 
    border-top: 13px solid #fff; 
}

也可参考的fiddle

来源

2016-05-31 Santhosh Kumar

通过响应您是否意味着顶部切割应始终达到其中心的最大深度，并在左/右侧为零深度？此外，元素的背景是什么？它是否始终是纯色（或）是否具有渐变/图像填充？ – Harry

由于边框的宽度是固定的，因此我们需要调整right.try的大小。它并没有触及其父母的结尾。即使浏览器调整大小，是否有任何解决方法可以保持相同的大小。当然，它会有一个渐变填充... –

在你的例子中，切割区域有白色？该区域可以是纯色还是不得不显示页面的背景（我的意思是，它应该是透明的）？ – Harry

使用CSS渐变+来变换：

一种方式来实现这一形状，顶部有一个响应削减将是使用两个倾斜的伪元素，将背景添加到伪元素而不是父元素。

因为伪元素是其父元素宽度的一半，所以在父元素上所需的填充也应该被分成两半并分配给2个伪元素。

这种方法的一个潜在缺陷是，如果父div的高度增加，则切割深度将增加。

.shape { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.shape:after, 
 
.shape:before { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 100%; 
 
    width: calc(50% + 1px); 
 
    top: 0; 
 
    backface-visibility: hidden; 
 
} 
 
.shape:before { 
 
    left: 0; 
 
    background-image: linear-gradient(to right, red, gold); 
 
    transform: skewY(2deg); 
 
    transform-origin: left top; 
 
} 
 
.shape:after { 
 
    right: 0; 
 
    background-image: linear-gradient(to right, gold, crimson); 
 
    transform: skewY(-2deg); 
 
    transform-origin: right top; 
 
} 
 
body { 
 
    background-image: radial-gradient(circle at center, sandybrown, chocolate); 
 
    min-height: 100vh; 
 
}

<div class='shape'></div>

使用CSS夹路径：（浏览器支持不好）

另一种方法是利用CSS clip-path的。在我看来，这是一个完美的选择，因为不需要进行梯度处理（如分成两半），即使div的高度增加等，切割的深度也不会改变。但不幸的是，它具有较差的浏览器支持。

.shape { 
 
    height: 100px; 
 
    width: 100%; 
 
    -webkit-clip-path: polygon(0px 0px, 50% 14px, 100% 0%, 100% 100%, 0% 100%); 
 
    background-image: linear-gradient(to right, red, gold, crimson); 
 
} 
 
body { 
 
    background-image: radial-gradient(circle at center, sandybrown, chocolate); 
 
    min-height: 100vh; 
 
}

<div class='shape'></div>

使用SVG剪辑路径：（更好的浏览器支持）

另一种方法是利用SVG clip-path的。这比浏览器的CSS支持有更好的浏览器支持，但不幸的是，这里的剪切深度会随着尺寸的变化而改变。

.shape { 
 
    height: 100px; 
 
    width: 100%; 
 
    -webkit-clip-path: url(#clipper); 
 
    clip-path: url(#clipper); 
 
    background-image: linear-gradient(to right, red, gold, crimson); 
 
} 
 
body { 
 
    background-image: radial-gradient(circle at center, sandybrown, chocolate); 
 
    min-height: 100vh; 
 
}

<svg width="0" height="0" viewBox="0 0 200 200"> 
 
    <defs> 
 
    <clipPath id="clipper" clipPathUnits="objectBoundingBox"> 
 
     <path d="M0,0 0.5,0.07 1,0 1,1 0,1z" /> 
 
    </clipPath> 
 
    </defs> 
 
</svg> 
 
<div class='shape'></div>

另外，我们可以使用它也父容器内绝对是SVG path或polygon元素（而不是clip-path）和位置做同样的，但它也有同样的限制SVG剪辑路径（也就是说，如果尺寸发生变化，剪切深度将增加，因为值是父容器大小的一部分，而不是固定长度）。

来源

2016-05-31 04:54:13 Harry

伙计。伟大的工作..赞誉 –

在css中绘制图形的响应

回答

相关问题