在创建CSS弯曲三角形弧

是否有可能创建一个CSS弯弧三角状的东西吗？（看看蓝色区域）。

我可以用一个椭圆形的div创建这个效果，它是白色的，另一个div位于顶部，它是蓝色的，所以它给出了弧的错觉。然而，这并不好，因为我需要弧线处的透明度，而不是白色椭圆形的白色区域。

我想要创建整体或两半，我可以设置成彼此相邻以形成整体。

来源

2017-02-19 Lansana

里面怎么样使用SVG图形？ SVG使用与CSS – Martin

相同的语法嗯，我不明白为什么SVG不起作用。但CSS会是理想的。 – Lansana

可以添加具有亲和预定高度的宽度的伪元件。

在此，设置边界半径50％，使其成椭圆形，并添加一个向上的阴影将得到您的形状。

基础元件需要有溢出隐藏保持阴影矩形

div { 
 
    background-image: linear-gradient(black, black); 
 
    background-size: 100% 30px; 
 
    background-repeat: no-repeat; 
 
    height: 30px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    padding-bottom: 80px; 
 
} 
 

 
div::after { 
 
    content: ''; 
 
    height: 160px; 
 
    width: 100%; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    box-shadow: 0px -80px 0px 100px blue; 
 
    top: 30px; 
 
    z-index: -1; 
 
}

<div></div>

来源

2017-02-19 19:07:19 vals

这是我正在寻找的答案，因为它使弧下的透明度成为可能。谢谢。 – Lansana

快乐，它帮助你！ – vals

您可以通过应用边框顶部半径伪元素实现这一点：

div { 
 
    background: blue; 
 
} 
 

 
div::after { 
 
    content: ''; 
 
    display: block; 
 
    background: white; 
 
    border-top-left-radius: 50%; 
 
    border-top-right-radius: 50%; 
 
    height: 75px; 
 
}

<div></div>

来源

2017-02-19 17:32:08

伟大的，这样一个简单和聪明的方式。谢谢！ – Lansana

第二次看，这实际上并没有解决我的问题，因为它给我的问题的解决方案相同的效果（椭圆部分是白色的，我需要它透明）。添加透明颜色不起作用，因为它继承了它是伪选择器的div的颜色。 – Lansana

对不起，我没有理解这个要求。我会考虑一下，但可能无法使用单个元素。 –

我建议有两个SVGs这样做。这样你就不会遇到拉伸。然后你放在页面的任一侧。然后他们应该回应伸展。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="360px" height="288px" viewBox="0 0 360 288" style="enable-background:new 0 0 360 288;"> 
    <style type="text/css"> 
    .st0{fill:#03B3DB;} 
    </style> 
    <path class="st0" d="M91.7,109.1V78.6h190c0,0-38-0.4-104.9,7.4C117.7,92.9,91.7,109.1,91.7,109.1z"/> 
</svg>

来源

2017-02-19 17:35:19

真棒SVG解决方案。谢谢！。 – Lansana

在创建CSS弯曲三角形弧

回答

相关问题