使用CSS制作圆角三角形

Question

我一直在尝试在页面的左下角和右上角创建此形状。不幸的是，我无法创建所需的外观，我能够实现的最接近的是具有以下代码的饼形：

<style>

  /* css code that will create, color, and shape
     the first accent color area */
  #colorAreaOne{

    width: 700px;
    height: 700px;
    background: #3333ff;
    opacity: 0.8;
    border-radius: 0 700px 0 0;
    -moz-border-radius: 0 700px 0 0;
    -webkit-border-radius: 0 700px 0 0;
    position: fixed;
    bottom: 0px;
    left: 0px;

  }

  /* css code that will create, color, and shape
     the second accent color area */
  #colorAreaTwo{

    width: 700px;
    height: 700px;
    background: #3333ff;
    opacity: 0.8;
    border-radius: 0 0 700px; 0;
    -moz-border-radius: 0 0 700px 0;
    -webkit-border-radius: 0 0 700px 0;
    position: fixed;
    top: 0px;
    right: 0px;

  }

</style>

如果有人有任何信息，我将不胜感激。谢谢！

Answer 1

径向渐变

div {
  width: 700px;
  height: 700px;
  margin: 1em auto;
  background-image: radial-gradient(circle at 100% 0, transparent 0%, transparent 700px, black 700px);
}

<div></div>

Answer 2

您可以使用正方形并使用圆形伪来填充阴影部分

＆＃13;

＆＃13;

div {
  height:50vw;
  width:50vw;
  bottom:0;      
  position:fixed;
  overflow:hidden;
  }
div:before {
  content:'';
  display:block;
  height:100%;
  border-radius:0  0 0 50% ;
  box-shadow:0 0 0 50vw turquoise;

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

border-radius: 50%; overflow: hidden;

＆＃13;

＆＃13;

.shape{
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.shape:after{
  content: "";
  position: absolute;
  left: -100%;
  bottom: -100%;
  width: 200%;
  height: 200%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 400px solid;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果伪元素与背景颜色相同，这是一个快速解决方案。

<div class="el"></div>

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
  var entity = modelBuilder.Entity<Entity>();

  entity.Property(p => p.Body).HasColumnType("text");

  base.OnModelCreating(modelBuilder);
}