machen abgerundete Form Dreieck CSS

Question

mit Ich habe versucht, diese Form in der unteren linken und rechten oberen Ecken der Seite zu erstellen. Leider habe ich nicht in der Lage gewesen, um das gewünschte Aussehen in der Nähe, die ich in der Lage gewesen, zu schaffen zu erreichen, ist ein Kreisform mit dem folgenden Code:

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

Wenn jemand irgendwelche Informationen hat, würde es sehr geschätzt werden. Vielen Dank!

Answer 1

ein Radial Gradienten

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

Sie ein Quadrat verwenden kann, und eine runde pseudo verwenden Teile davon mit einem Schatten

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;

<div></div>

zu füllen

Answer 3

border-radius: 50%; overflow: hidden;

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

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

Answer 4

Hier ist eine schnelle Lösung, wenn Pseudo-Element gleiche Farbe wie Hintergrund arbeiten.

.el { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: black; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 50px; 
 
} 
 
.el:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 200%; 
 
    height: 200%; 
 
    background: white; 
 
    border-radius: 50%; 
 
}

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