在CSS中创建弯曲的三角形弧

Question

是否可以使用CSS创建弧形三角形的东西？ （看看蓝色区域）。

我可以用一个白色的椭圆形div创建这个效果，另一个div坐在它上面是蓝色，所以它给出了弧形的错觉。然而这并不好，因为我需要弧形所在的透明度，而不是白色椭圆形所阻挡的白色区域。

我想创建一个整体，或者我可以彼此相邻设置的一半来构成一个整体。

Answer 1

您可以添加具有父级宽度和预定义高度的伪元素。

在此基础上，将border-radius设置为50％以使其为椭圆形，然后向上添加阴影以获得形状。

基本元素需要隐藏溢出以将阴影保持在矩形内

＆＃13;

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以通过将边框顶部半径应用于伪元素来实现此目的：

＆＃13;

＆＃13;

div {
  background: blue;
}

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我建议使用两个SVG。这样你就不会经历伸展运动。然后你放在页面的两边。然后他们应该相应地伸展。

<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>