在角落创建CSS3形状？

Question

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

我不需要为字体设计样式，只针对左角，可以这样做吗？

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

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

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

Answer 1

我想你想要这样的东西

<强> jsfiddle

使用:before创建和元素，并将其设为椭圆形。

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

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

使此解决方案能够处理元素所在容器的background-color（在本例中为body），需要与background-color的{​​{1}}相同元素

＆＃13;

＆＃13;

:before

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请查看jsFiddle。