メイクCSSのコーナースタイル

Question

私はCSSで、このような表示オプションの設計作る方法を、混乱しています：この絵のようなコーナーのスタイルを作るためにどのように

を...私を助けてください。おかげ

Answer 1

これを試してみてください：

.inner{ 
 
    height: 300px; 
 
    width: 200px; 
 
    background-color: red; 
 
    border-radius: 10px; 
 
} 
 

 
.outer{ 
 
    padding: 10px; 
 
    background-color: green; 
 
    display: inline-block; 
 
    border-radius: 20px; 
 
    position: relative; 
 
    margin-left: 100px; 
 
} 
 

 
.arrow{ 
 
position: absolute; 
 
top: 30px; 
 
left: -50px; 
 
border: 25px solid transparent; 
 
border-right: 25px solid green; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
    <div class='arrow'> 
 
</div>

Answer 2

https://jsfiddle.net/pksdhofc/1/

<div class='arrow'></div> 

.arrow{ 
    width: 30px; 
    height: 80px; 
    background-color: #999; 
    -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 50%); 
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 50%); 
} 

クリップパスは、SVGを作成するために、複数のX及びY COORDSを使用します。あなたは好きなように細かくすることができますが、それはちょっと必要なものを作ります。