与插入曲线和透明背景的CSS形状 [英] CSS shape with inset curve and transparent background

问题描述

我需要创建一个CSS形状，如下图所示。

请检查此 fiddle 我的工作
我创建了类似的东西，但我不能给它一个曲线。

  #shape {
 border-left：70px solid transparent; 
 border-top：100px solid red; 
 height：0; 
 width：200px; 
} 
  

任何人都可以帮助我吗？

解决方案

您可以使用边框半径和背景阴影的伪元素创建曲线，并为曲线启用透明背景。

DEMO

输出：

HTML：

 < div id =shape>< / div> 
  

  #shape {
 height：100px; 
 width：300px; 
 position：relative; 
 overflow：hidden; 
} 
 #shape：before {
 content：''; 
 position：absolute; 
 top：10％; 
 right：0; 
 width：300％; 
 padding-bottom：300％; 
 border-radius：100％; 
 background：none; 
 -webkit-box-shadow：10px -10px 5px 300px＃F15723; 
 box-shadow：10px -10px 5px 300px＃F15723; 
 z-index：-1; 
} 
  

I need to create a CSS shape like this image..

Please check this fiddle of my work I have created something like that, but I cannot give a curve to it.

#shape {     
    border-left: 70px solid transparent;
    border-top: 100px solid red;
    height: 0;
    width: 200px;
} 

Can anyone help me?

解决方案

You can use a pseudo element with border-radius and background-shadows to create the curve and enable a transparent background for the curve.

DEMO

output :

HTML :

<div id="shape"></div>

CSS :

#shape {     
    height: 100px;
    width: 300px;
    position:relative;
    overflow:hidden;
} 
#shape:before{
    content:'';
    position:absolute;
    top:10%;
    right:0;
    width:300%;
    padding-bottom:300%;
    border-radius:100%;
    background:none;
    -webkit-box-shadow: 10px -10px 5px 300px #F15723;
    box-shadow: 10px -10px 5px 300px #F15723;
    z-index:-1;
}

这篇关于与插入曲线和透明背景的CSS形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！