CSSを使用してこれらの図形を作成する方法は？

Question

私はこのようなデザインをCSSで開発したいと考えています。どうやってするか？

Answer 1

丸みを帯びた角を作るために、transform: rotate()を使用する要素を回転させるようにborder-radius、
を使用し、
それは、疑似要素の上にそれを置くのがベストですので、あなたは親(45deg)を回転させる必要はありませんし、子供(-45deg)。

.shape { 
 
    width: 150px; 
 
    height: 150px; 
 
    position: relative; 
 
} 
 

 
.shape::before { 
 
    content: ""; 
 
    width: 100%; height: 100%; 
 
    position: absolute; top: 0; left: 0; 
 
    
 
    border-radius: 50% 50% 50% 0; 
 
    border: 1px solid; 
 
    background-color: green; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.content { 
 
    position: relative; 
 
    z-index: 1; /* put bigger z-index than the pseudo element*/ 
 
}

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

Answer 2

デザインは、あなたがしたいことを、同様です。

.tear { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    width: 10em; 
 
    height: 10em; 
 
    border: none; 
 
    -webkit-border-radius: 80% 0 55% 50%/55% 0 80% 50%; 
 
    border-radius: 80% 0 55% 50%/55% 0 80% 50%; 
 
    font: normal 100%/normal Arial, Helvetica, sans-serif; 
 
    color: rgba(0,0,0,1); 
 
    -o-text-overflow: clip; 
 
    text-overflow: clip; 
 
    background: #1abc9c; 
 
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms; 
 
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms; 
 
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms; 
 
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms; 
 
    -webkit-transform: rotateX(-10.313240312354818deg) rotateY(-5.156620156177409deg) rotateZ(-32.0856365273261deg) ; 
 
    transform: rotateX(-10.313240312354818deg) rotateY(-5.156620156177409deg) rotateZ(-32.0856365273261deg) ; 
 
}

<div class="tear">Aditya</div>