创建 CSS3 个圆角形状？

Question

我知道我可以在 CSS 中创建很多圆角，但我从来没有创建过这样的东西

我不需要字体样式，只需要左下角的标题，这样可以吗？

我知道我可以像这样创造月亮，也许这就是方法？

#moon { 
width: 80px;
height: 80px;
border-radius: 50%; 
box-shadow: 15px 15px 0 0 red; 
}

我认为它必须在伪class之前？知道如何让它像我的照片一样吗？

Answer 1

我猜你想要这样的东西

jsfiddle

只需使用 :before 创建元素并使其成为椭圆形。

要使其成为椭圆形，您需要设置 border-radius:100%; 并且元素应为矩形...而不是方形。

然后进行一些小的位置调整。

要使此解决方案起作用，元素所在容器的 background-color（在本例中为 body）需要与 [=] 的 background-color 相同12=] 元素

body {
  background:#fff;
}

h2 { 

color:#fff;
font-size:20px;
padding:10px;
width:200px;
text-align:right;
background:blue;
text-transform:uppercase;
position:relative;

}

h2:before {
  position:absolute;
  content:"";
  background:#fff;
  height:120%;
  width:50px;
  border-radius: 100%;
  left:-25px;
  top:-10%;
}

<h2>
Predictions
</h2>

Answer 2

您可以将 radial-gradient 用于 background 属性元素，无需任何额外元素或伪元素：

.shape {
  width: 200px;
  height: 50px;
  padding: 0 20px;

  line-height: 50px;
  color: #ffffff;
  text-align: right;
  text-transform: uppercase;
  font-size: 20px;

  background: radial-gradient(circle 26px at 0% 50%, transparent, transparent 25px, #0000ff);
}

<div class="shape">Predictions</div>

此外，您可以使用 radial-gradient 的参数来获得任何所需的弧线：

.shape {
  width: 200px;
  height: 50px;
  padding: 0 20px;

  line-height: 50px;
  color: #ffffff;
  text-align: right;
  text-transform: uppercase;
  font-size: 20px;

  background: radial-gradient(circle 41px at -13% 50%, transparent, transparent 40px, #0000ff);
}

<div class="shape">Predictions</div>

请看jsFiddle.

创建 CSS3 个圆角形状？

Creating CSS3 shapes round corner?

css

shapes