css - CSS3 でこの効果を作成するには?

Question

CSS3（カットコーナー）を使用して、このタイプ（画像が添付されている）効果（半径なし）を達成しようとしています

これを境界半径で作成する方法はありますか?

Answer 1

これがHtmlコードの例です

<div class="div-wrap">
<div class="div-sec">Lorem ipsum dolor sit amet, blandit quaestio corrumpit ei has. Ei hinc dolor referrentur est. Legere corrumpit scripserit ad his. Eu qui ludus noster efficiendi. Sea iisque eleifend euripidis ea, pri at habeo patrioque. Debet deleniti recteque ne ius, ut albucius urbanitas usu. Eu illum posse viderer sea, an nec percipit verterem, duo id eirmod suscipit tractatos.</div>
</div>

CSS コード

.div-wrap {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.div-sec {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid #000;
    color:#fff;
    border-right: 50px solid transparent;
}