如何用CSS3创建这个效果？

Question

我正在尝试使用CSS3（切角）实现此类型（img附加）效果（无半径）

有没有办法用边框半径来做这个？

Answer 1

这是example
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;
}